Thuộc tính animation trong CSS

• Ngọc Thanh
• 30
• 19/07/2025

Thuộc tính animation trong CSS là một loại thuộc tính của CSS dùng để tạo hiệu ứng chuyển động cho các phần tử HTML, giúp các hiệu ứng trở nên sống động hơn, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính animation trong CSS

Thuộc tính animation trong CSS là gì?

Thuộc tính animation trong CSS là một loại thuộc tính của CSS dùng để tạo hiệu ứng chuyển động cho các phần tử HTML, giúp các hiệu ứng trở nên sống động hơn, dễ chú ý hơn.

Ví dụ Thuộc tính animation trong CSS

Css animation from to

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
    position: relative;
    animation: chayngang;
    animation-duration: 1s;
   animation-iteration-count: infinite; 
}
@keyframes chayngang{
    from {left: 0px;}
    to {left: 200px;}
}

Ở ví dụ này mình đặt tên animation là chạy ngang, thời gian chạy mỗi lần là 1 giây, số lần chạy là không giới hạn số lần chạy, hàm chạy ngang sẽ chạy từ left 0px đến left 200px.

Chạy Thử

Css animation phần trăm (%)

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
    position: relative;
    animation: chayngang;
    animation-duration: 2s;
   animation-iteration-count: infinite; 
}
@keyframes chayngang{
   0% {top:0px;left:0px}
     50% {top:0px;left:200px}
    75% {top:200px;left:200px}
    100% {top:200px;left:0px}
}

Ở ví dụ này mình cho thời gian chạy là 2 giây và chạy liên tục, lúc 0% là ở vị trí xuất phát, lúc 50% sẽ cách top 0px, cách left 200px, lúc 75% cách top 200px cách left 200px, lúc 100% các top 200px cách left 0px, chạy theo hình vuông.

Chạy Thử

Các thuộc tính thuộc animation

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-name	tên animation	animation-name: myAnimation;	Xác định tên cho một animation.
animation-duration	thời gian	animation-duration: 5s;	Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-function	linear	animation-timing-function: linear;	Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc.
	ease	animation-timing-function: ease;	Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định.
	ease-in	animation-timing-function: ease-in;	Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.
	ease-out	animation-timing-function: ease-out;	Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.
	ease-in-out	animation-timing-function: ease-in-out;	Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.
	cubic-bezier(n,n,n,n)	animation-timing-function: cubic-bezier(1,1,1,0);	Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.
animation-delay	thời gian	animation-delay: 3s;	Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0
animation-iteration-count	số tự nhiên	animation-iteration-count: 4;	Xác định số lần thực hiện chuyển động.
	infinite	animation-iteration-count: infinite;	Chuyển động sẽ thực hiện không giới hạn số lần.
animation-direction	normal	animation-direction: normal;	Chuyển động bình thường, đây là dạng mặc định.
	alternate	animation-direction: alternate;	Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo.
animation-play-state	paused	animation-play-state: paused;	Xác định chuyển động dừng lại.
	running	animation-play-state: running;	Xác định chuyển động chạy.
animation	[name] [duration] [timing] [delay] [interaction-count] [direction]	animation: myAnimation 5s linear 3s infinite alternate;	Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính animation-play-state.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation trong CSS.

Ngọc Thanh

Chia sẻ nội dung đánh giá của bạn về Thuộc tính animation trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn