7.1 属性 animation-name
CSS动画可以创建动态和平滑的视觉效果，改善用户界面并使其更具交互性。动画属性可以控制动画的各个方面，比如名字、持续时间、timing函数和延迟。现在我们来详细看看这些属性，并展示如何使用它们。
属性 animation-name 定义了将应用于元素的动画名称。名字必须与在 @keyframes 规则中定义的名称相匹配。
语法：
element {
animation-name: animation-name;
}
这里的:
animation-name: 在@keyframes中定义的动画名称
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
}
代码解释：
@keyframes moveRight: 定义了一个名为moveRight的动画，将元素向右移动.box: 使用了动画moveRight的元素
7.2 属性 animation-duration
属性 animation-duration 定义了动画的持续时间。值可以用秒（s）或毫秒（ms）表示。
语法：
element {
animation-duration: time;
}
这里的:
time: 动画的持续时间（例如，2s 表示2秒，500ms 表示500毫秒）。
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
animation-duration: 2s;
}
代码解释：
animation-duration: 2s: 设置动画 moveRight 的持续时间为2秒
7.3 属性 animation-timing-function
属性 animation-timing-function 定义了动画随时间变化的速度。它允许创建各种动画效果，比如加速、减速等。
语法：
element {
animation-timing-function: function;
}
这里的:
-
function: 定义动画速度变化的timing函数 （例如，ease，linear，ease-in，ease-out，ease-in-out）
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
代码解释：
-
animation-timing-function: ease-in-out: 为动画moveRight设置timing函数，使动画从缓慢开始和结束，并在中间加速
主要的timing函数：
ease: 动画开始缓慢，中间加速，最后减速linear: 动画从头到尾以恒定速度进行ease-in: 动画开始缓慢，然后加速ease-out: 动画开始快速，然后减速ease-in-out: 动画开始和结束缓慢，中间加速
7.4 属性 animation-delay
属性 animation-delay 定义了动画开始前的延迟。值可以用秒（s）或毫秒（ms）表示。
语法：
element {
animation-delay: time;
}
这里的:
time: 动画开始前的延迟（例如，1s 表示1秒，500ms 表示500毫秒）
例子：
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
animation-name: moveRight;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
}
代码解释：
animation-delay: 1s: 设置动画moveRight开始前的延迟为1秒
GO TO FULL VERSION