6.1 Quy tắc @keyframes
CSS animations cho phép tạo ra các hiệu ứng hình ảnh phức tạp và mượt mà với ít nỗ lực. Công cụ chính để tạo hoạt ảnh trong CSS là quy tắc @keyframes, quy định các khung hình chính của hoạt ảnh và các thay đổi về kiểu dáng cần xảy ra ở mỗi khung hình.
Quy tắc @keyframes được sử dụng để tạo hoạt ảnh, xác định sự thay đổi các thuộc tính CSS ở các giai đoạn khác nhau của hoạt ảnh. Các khung hình chính quy định những kiểu dáng nào sẽ được áp dụng tại những thời điểm nhất định trong quá trình hoạt ảnh.
Cú pháp 1:
@keyframes animation-name {
from {
/* phong cách bắt đầu */
}
to {
/* phong cách kết thúc */
}
}
Cú pháp 2:
@keyframes animation-name {
0% {
/* phong cách bắt đầu */
}
100% {
/* phong cách kết thúc */
}
}
Nơi:
fromtương ứng với0%thời gian hoạt ảnhtotương ứng với100%thời gian hoạt ảnh
Ví dụ: Thay đổi màu nền mượt mà
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Giải thích:
- quy tắc
@keyframes changeColorxác định hoạt ảnh thay đổi màu nền của phần tử từlightbluethànhlightcoral - thuộc tính
animationtrên phần tử.animated-boxchỉ định rằng hoạt ảnhchangeColorphải kéo dài 3 giây và lặp lại vô hạn
6.2 Nhiều khung hình chính
Bạn có thể sử dụng nhiều hơn hai khung hình chính để tạo ra các hoạt ảnh phức tạp hơn, xác định các kiểu dáng cho các trạng thái trung gian.
Ví dụ: Di chuyển theo đường chéo với thay đổi màu sắc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Giải thích:
Quy tắc @keyframes moveAndChangeColor quy định hoạt ảnh thay đổi màu nền và vị trí của phần tử trong ba giai đoạn.
- Tại 0% thời gian hoạt ảnh, phần tử có màu xanh da trời nhạt và nằm ở vị trí bắt đầu
- Tại 50% thời gian hoạt ảnh, phần tử có màu xanh lá cây nhạt và di chuyển 100 pixel sang phải và xuống dưới
- Tại 100% thời gian hoạt ảnh, phần tử có màu san hô nhạt và di chuyển 200 pixel sang phải
6.3 Ví dụ về hoạt ảnh đơn giản
Ví dụ 1: Hiệu ứng nhấp nháy
Tạo hiệu ứng nhấp nháy, khi một phần tử tăng và giảm kích thước một cách mượt mà.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Giải thích:
- quy tắc
@keyframes pulsexác định hoạt ảnh tăng kích thước phần tử lên 120% và trả lại kích thước ban đầu - thuộc tính
animationtrên phần tử.pulse-boxchỉ định rằng hoạt ảnhpulsephải kéo dài 2 giây và lặp lại vô hạn
Ví dụ 2: Quay
Tạo hiệu ứng quay liên tục của phần tử:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Giải thích:
- quy tắc
@keyframes rotatexác định hoạt ảnh quay phần tử từ 0 đến 360 độ - thuộc tính
animationtrên phần tử.rotate-boxchỉ định rằng hoạt ảnhrotatephải kéo dài 3 giây, lặp lại vô hạn, và xảy ra với tốc độ không đổi (linear)
GO TO FULL VERSION