Giá trị
<single-easing-function>
Xác định loại chuyển tiếp. Giá trị phải là một trong những giá trị có sẵn trong
animation =
<single-animation># <single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
7.<single-animation-iteration-count>Số lần hoạt hình được chơi. Giá trị phải là một trong những giá trị có sẵn trong
animation =
<single-animation># <single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
9.animation =
<single-animation># <single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
0Hướng mà hoạt hình được chơi. Giá trị phải là một trong những giá trị có sẵn trong
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
1.animation =
<single-animation># <single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
1Xác định cách áp dụng các kiểu cho mục tiêu của hoạt hình trước và sau khi thực hiện. Giá trị phải là một trong những giá trị có sẵn trong
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
3.animation =
<single-animation># <single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
2Xác định xem hoạt hình có phát hay không. Giá trị phải là một trong những giá trị có sẵn trong
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
5.Sự mô tả
Thứ tự của các giá trị thời gian trong mỗi định nghĩa hoạt hình là quan trọng: giá trị thứ nhất có thể được phân tích cú pháp dưới dạng <time> được gán cho
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
7 và giá trị thứ hai được gán cho :root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
8.Thứ tự của các giá trị khác trong mỗi định nghĩa hoạt hình cũng rất quan trọng để phân biệt giá trị
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
9 với các giá trị khác. Nếu một giá trị trong tốc ký animation có thể được phân tích cú pháp làm giá trị cho thuộc tính hoạt hình khác với :root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
9, thì giá trị sẽ được áp dụng cho thuộc tính đó trước và không phải là :root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
9. Vì lý do này, thực tiễn được đề xuất là chỉ định giá trị cho :root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
9 là giá trị cuối cùng trong danh sách các giá trị khi sử dụng tốc ký animation; Điều này đúng ngay cả khi bạn chỉ định nhiều hình ảnh động được phân tách bằng dấu phẩy bằng cách sử dụng tốc ký animation.Giá trị
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
9 không bắt buộc phải được khai báo trong tài sản tốc ký animation. Nếu không có tên tồn tại, không có hình ảnh động để áp dụng cho bất kỳ thuộc tính nào.Khi giá trị
:root {
overflow: hidden; /* hides any part of the sun below the horizon */
background-color: lightblue;
display: flex;
justify-content: center; /* centers the sun in the background */
}
.sun {
background-color: yellow;
border-radius: 50%; /* creates a circular background */
height: 100vh; /* makes the sun the size of the viewport */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* pushes the sun down past the viewport */
transform: translateY(110vh);
}
to {
/* returns the sun to its default position */
transform: translateY(0);
}
}
7 bị bỏ qua từ thuộc tính tốc ký animation, giá trị cho thuộc tính này mặc định là :root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/* multiple animations are separated by commas */
animation:
4s linear 0s infinite alternate rise,
/* animation parameters are set independently */
24s linear 0s infinite psychedelic;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes psychedelic {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
0. Trong trường hợp này, hoạt hình vẫn sẽ xảy ra (các sự kiện :root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/* multiple animations are separated by commas */
animation:
4s linear 0s infinite alternate rise,
/* animation parameters are set independently */
24s linear 0s infinite psychedelic;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes psychedelic {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
1 và :root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/* multiple animations are separated by commas */
animation:
4s linear 0s infinite alternate rise,
/* animation parameters are set independently */
24s linear 0s infinite psychedelic;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes psychedelic {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
2 sẽ được bắn) nhưng sẽ không có hình ảnh động nào được hiển thị.Thuộc tính CSS thời gian hoạt hình đặt thời gian mà một hình ảnh động mất một chu kỳ.animation-duration CSS property sets the length of time that an animation takes to complete one cycle.
