Animation và @keyframes
Animation và @keyframes là một bộ thuộc tính đi chung với nhau dùng để tạo hiệu ứng chuyển động, 2 thuộc tính này được kỳ vọng giảm tải lượng lớn source code Javascript.
Phần lớn trang web gần đây sử dụng animation và @keyframes khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.
Cấu trúc
Cần phải có đầy đủ cả 2 thuộc tính animation và @keyframes.
Cấu trúc animation cơ bản
tag {
animation: [animation-name] [duration];
}
@keyframes animation-name {
}
Cấu trúc animation tổng quát
tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}
@keyframes có 2 cấu trúc như sau (tùy vào mục đích sử dụng):
@keyframes animation-name {
from { }
to { }
}
@keyframes animation-name {
0% { }
10% { }
40% { }
...
100% { }
}
Các giá trị của animation:
Cách sử dụng
HTML viết:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Animation</p>
</div>
</body>
</html>
CSS viết - khi chưa sử dụng animation:
p {
background-color: #476CFF;
text-align: center;
width: 100px;
}
Hiển thị trình duyệt:
Animation
Tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về animation:
CSS viết:
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}
Hiển thị trình duyệt:
Animation
Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Animation</p>
</div>
</body>
</html>
Animation lặp lại và đổi chiều
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}
Animation
Animation theo vị trí
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { left: 0; }
to { left: 100px; }
}
Animation
Animation với transform
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from {
left: 0;
transform: rotate(0deg);
}
to {
left: 200px;
transform: rotate(360deg);
}
}
Animation
Animation kết hợp nhiều giá trị
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from {
background-color: #73BEFF;
height: 30px;
line-height: 30px;
left: 0;
}
to {
background-color: #FFFF00;
height: 100px;
line-height: 100px;
left: 200px;
}
}
Animation
Animation và @keyframes theo phần trăm
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
0% {
background-color: #73BEFF;
left: 0;
top: 0;
}
30% {
background-color: #FFFF00;
left: 150px;
top: 40px;
transform: rotate(0deg);
}
60% {
background-color: #FF0000;
left: 300px;
top: 0;
transform: rotate(-180deg);
}
100% {
background-color: #BC70FF;
left: 400px;
top: 60px;
transform: rotate(180deg);
}
}
Animation
Khi có nhu cầu về các sản phẩm bên trên, đừng ngần ngại gọi ngay cho: 09.7777.1060
Hoặc Zalo 09.7777.1060 để được sự hỗ trợ và tư vấn sớm nhất
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn
Animation và @keyframes là một bộ thuộc tính đi chung với nhau dùng để tạo hiệu ứng chuyển động, 2 thuộc tính này được kỳ vọng giảm tải lượng lớn source code Javascript.
Phần lớn trang web gần đây sử dụng animation và @keyframes khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.
Cấu trúc
Cần phải có đầy đủ cả 2 thuộc tính animation và @keyframes.
Cấu trúc animation cơ bản
tag {
animation: [animation-name] [duration];
}
@keyframes animation-name {
}
Cấu trúc animation tổng quát
tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}
@keyframes có 2 cấu trúc như sau (tùy vào mục đích sử dụng):
@keyframes animation-name {
from { }
to { }
}
@keyframes animation-name {
0% { }
10% { }
40% { }
...
100% { }
}
Các giá trị của animation:
| Giá trị | Đơn vị | VD | Mô tả |
|---|---|---|---|
| animation-name | Tên bất kỳ, không khoảng cách. | boxAnimation | Xác định tên cho một animation, bắt buộc trùng với tên khai báo tại @keyframes. |
| duration | Thời gian | 5s | Thời gian để hoàn thành một chuyển động, mặc định là 0s. |
| timing | linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) | ease | Xác định loại hiệu ứng chuyển động. |
| delay | Thời gian | 2s | Cho biết sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0. |
| interaction-count | Số tự nhiên infinite | Số lần thực hiện chuyển động, mặc định 1 lần. Giá trị infinite là lập vô hạn. | |
| direction | normal alternate | alternate | Cho biết chuyển động có đảo ngược ở chu kỳ tiếp theo hay không, mặc định là normal. |
HTML viết:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Animation</p>
</div>
</body>
</html>
CSS viết - khi chưa sử dụng animation:
p {
background-color: #476CFF;
text-align: center;
width: 100px;
}
Hiển thị trình duyệt:
Animation
Tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về animation:
CSS viết:
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}
Hiển thị trình duyệt:
Animation
Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:
- [animation-name]: tên này cần phải trùng với @keyframes.
- [duration]: một chu kỳ chuyển động trong 5s.
- [interaction-count]: cho chuyển động lặp vô hạn.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>
<p>Animation</p>
</div>
</body>
</html>
Animation lặp lại và đổi chiều
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}
Animation
Animation theo vị trí
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { left: 0; }
to { left: 100px; }
}
Animation
Animation với transform
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from {
left: 0;
transform: rotate(0deg);
}
to {
left: 200px;
transform: rotate(360deg);
}
}
Animation
Animation kết hợp nhiều giá trị
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from {
background-color: #73BEFF;
height: 30px;
line-height: 30px;
left: 0;
}
to {
background-color: #FFFF00;
height: 100px;
line-height: 100px;
left: 200px;
}
}
Animation
Animation và @keyframes theo phần trăm
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
0% {
background-color: #73BEFF;
left: 0;
top: 0;
}
30% {
background-color: #FFFF00;
left: 150px;
top: 40px;
transform: rotate(0deg);
}
60% {
background-color: #FF0000;
left: 300px;
top: 0;
transform: rotate(-180deg);
}
100% {
background-color: #BC70FF;
left: 400px;
top: 60px;
transform: rotate(180deg);
}
}
Animation
Khi có nhu cầu về các sản phẩm bên trên, đừng ngần ngại gọi ngay cho: 09.7777.1060
Hoặc Zalo 09.7777.1060 để được sự hỗ trợ và tư vấn sớm nhất
CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn