CSS Animations

CSS animations điều khiển chuyển động và giao diện của các phần tử trên trang web. Chúng ta có thể tạo hiệu ứng cho các phần tử HTML mà không cần JavaScript.

Sử dụng @keyframes để xác định các bước của animation.
Áp dụng animation với các thuộc tính như animation-name và animation-duration.
Kiểm soát luồng animation bằng cách sử dụng animation-timing-function và animation-delay.

CSS Animation Properties

CSS animations liên quan đến một số thuộc tính quan trọng sau:

Property	Description
@keyframes	Quy tắc @keyframes trong CSS được dùng để chỉ định quy tắc animation.
animation-name	Thuộc tính này dùng để chỉ định tên của @keyframes mô tả animation.
animation-duration	Thuộc tính này được dùng để chỉ định thời gian animation hoàn thành một chu kỳ.
animation-timing-function	Nó chỉ định cách animation chuyển đổi qua các keyframes. Có một số cài đặt sẵn có trong CSS. Chúng được sử dụng làm giá trị cho animation-timing-function ví dụ như linear, ease,ease-in,ease-out, và ease-in-out.
animation-delay	Thuộc tính này chỉ định độ trễ của lúc bắt đầu animation.
animation-iteration-count	Thuộc tính này chỉ định số lần animation sẽ được lặp lại.
animation-direction	Nó xác định hướng của animation. Hướng animation có thể là normal, reverse, alternate, và alternate-reverse.
animation-fill-mode	Nó định nghĩa cách các style được áp dụng trước và sau animation. Chế độ fill của animation có thể là none, forwards, backwards, hoặc both.
animation-play-state	Thuộc tính này chỉ định animation đang chạy hoặc tạm dừng.

@keyframes Rule

Quy tắc @keyframes định nghĩa cách các style của một phần tử thay đổi theo thời gian trong animation.

Syntax

@keyframes animation-name {
    from {
        /* Initial Styles */
    }
    to {
        /* Final Styles */
    }
}

"from" xác định các style bắt đầu và "to" xác định các style kết thúc.
Bạn cũng có thể dùng giá trị phần trăm để chỉ định các bước trung gian.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: blue;
			animation: changeColor 3s infinite;
		}

		@keyframes changeColor {
			from {
				background-color: blue;
			}

			to {
				background-color: green;
			}
		}
	</style>

<!--Driver Code Starts-->
</head>

<body>
	<div class="box"></div>
</body>

</html>
<!--Driver Code Ends-->

Class .box tạo một hình vuông màu xanh và áp dụng animation changeColor. Animation kéo dài 3 giây và lặp lại vô hạn.
Quy tắc @keyframes changeColor thay đổi màu nền từ xanh lam sang xanh lục.

animation-name Property

Thuộc tính animation-name chỉ định tên của animation @keyframes để áp dụng cho một phần tử.

Syntax

animation-name: animationName;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: moveRight;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        @keyframes moveRight {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->

In this example

Class .box áp dụng animation moveRight cho thẻ <div>.
animation-name liên kết phần tử đến chuỗi @keyframes moveRight.
Hình vuông di chuyển ngang từ vị trí ban đầu đến 200px bên phải trong 2 giây. Animation lặp lại vô hạn.

animation-timing-function property

Thuộc tính animation-timing-function kiểm soát đường cong tốc độ của animation. Nó xác định cách animation tiến triển theo thời gian.

Syntax

animation-timing-function: timingFunction;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: slide;
            animation-duration: 3s;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
        }

        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(300px);
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends-->

In this example

Class .box áp dụng animation slide cho thẻ <div>.
animation-timing-function: ease-in; làm cho animation bắt đầu chậm rồi tăng tốc.

animation-delay property

Thuộc tính animation-delay chỉ định độ trễ trước khi animation bắt đầu. Nó kiểm soát thời điểm animation bắt đầu sau khi được kích hoạt.

Syntax

animation-delay: time;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: fadeIn;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends-->

In this example

Phần tử .box được thiết lập để làm mờ dần bằng animation fadeIn.
animation-delay: 1s; trì hoãn sự bắt đầu của animation trong một giây.
Animation kéo dài 2 giây và lặp lại vô hạn.

animation-iteration-count property

Thuộc tính animation-iteration-count chỉ định số lần animation sẽ lặp lại.

Syntax

animation-iteration-count: number | infinite;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: blue;
			animation: bounce 2s infinite;
		}
		@keyframes bounce {
			0% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-50px);
			}

			100% {
				transform: translateY(0);
			}
		}
	</style>

<!--Driver Code Starts-->
</head>
<body>
	<div class="box"></div>
</body>

</html>
<!--Driver Code Ends-->

In this example

Phần tử .box sử dụng animation bounce kéo dài 2 giây.
animation-iteration-count: infinite; làm cho animation lặp lại liên tục.

animation-direction property

Thuộc tính animation-direction chỉ định animation nên chạy xuôi, ngược hay xen kẽ giữa hai hướng.

Syntax

animation-direction: normal | reverse | alternate | alternate-reverse;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: blue;
			animation: move 2s infinite;
			animation-direction: alternate;
		}
		@keyframes move {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(200px);
			}
		}
	</style>

<!--Driver Code Starts-->
</head>
<body>
	<div class="box"></div>
</body>

</html>
<!--Driver Code Ends-->

In this example

Phần tử .box di chuyển từ vị trí ban đầu đến 200px bên phải.
animation-direction: alternate; làm animation chạy xuôi ở lần lặp đầu tiên và ngược lại ở lần tiếp theo. Điều này tạo ra chuyển động qua lại.

animation-fill-mode property

Thuộc tính animation-fill-mode chỉ định cách CSS animation áp dụng style cho mục tiêu trước và sau khi nó thực thi.

Syntax

animation-fill-mode: none | forwards | backwards | both;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 3s forwards;
        }
        @keyframes move {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(200px);
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends-->

In this example

Phần tử .box di chuyển từ vị trí ban đầu đến 200px bên phải trong 3 giây.
animation-fill-mode: forwards; đảm bảo rằng hình vuông giữ lại trạng thái cuối cùng sau khi animation hoàn thành.

animation-play-state property

Thuộc tính animation-play-state kiểm soát xem animation đang chạy hoặc tạm dừng.

Syntax

animation-play-state: running | paused;

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: spin 4s linear infinite;
            animation-play-state: paused;
        }

        .box:hover {
            animation-play-state: running;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends-->

In this example

Phần tử .box có animation spin xoay nó 360 độ trong 4 giây vô hạn.
animation-play-state: paused; ban đầu tạm dừng animation.

Animation Shorthand Property

Thuộc tính animation shorthand cho phép bạn thiết lập tất cả các thuộc tính liên quan đến animation trong một khai báo duy nhất. Nó làm cho code CSS của bạn sạch hơn.

Syntax

animation: [animation-name] [animation-duration] [animation-timing-function] 
[animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s ease-in 1s infinite alternate forwards;
        }
        @keyframes move {
            from {
                transform: translateX(0);
                background-color: blue;
            }
            to {
                transform: translateX(200px);
                background-color: green;
            }
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!--Driver Code Ends-->

In this example

Class .box sử dụng animation shorthand để áp dụng animation move.
Animation kéo dài 2 giây bắt đầu sau 1 giây. Nó chạy vô hạn thay đổi hướng và giữ trạng thái cuối.
Hình vuông di chuyển từ vị trí ban đầu đến 200px bên phải. Nó thay đổi màu từ xanh lam sang xanh lục mượt mà.

Best Practices for CSS Animations

Use Animations Purposefully: Áp dụng animation để nâng cao trải nghiệm người dùng, tránh gây xao nhãng.
Animate Performance-Friendly Properties: Ưu tiên animation các thuộc tính như transform và opacity để có hiệu suất mượt mà hơn.
Ensure Accessibility: Cung cấp tùy chọn cho người dùng giảm hoặc tắt animation. Điều này để phù hợp với những người nhạy cảm với chuyển động.

CSS Animations

CSS Animation Properties

@keyframes Rule

Syntax

animation-name Property

animation-timing-function property

animation-delay property

Syntax

animation-iteration-count property

animation-direction property

animation-fill-mode property

animation-play-state property

Animation Shorthand Property

Best Practices for CSS Animations

CSS Display Property

CSS Opacity / Transparency

Advance CSS Layout with Flexbox

CSS Colors

CSS Gradients

CSS font-kerning Property

CSS clear Property

CSS backface-visibility Property

CSS visibility Property

CSS pointer-events Property

CSS