1. 动画名称（animation-name）： 指定动画的名称。
animation-name: myAnimation;
2. 动画持续时间（animation-duration）： 指定动画的持续时间。
animation-duration: 2s;
3. 动画时间函数（animation-timing-function）： 指定动画的时间函数，控制动画过程中的速度变化。
animation-timing-function: ease-in-out;
4. 动画延迟（animation-delay）： 指定动画的延迟时间，即动画开始前的等待时间。
animation-delay: 0.5s;
5. 动画次数（animation-iteration-count）： 指定动画的播放次数，可以使用关键词 infinite 表示无限循环。
animation-iteration-count: 3;
6. 动画方向（animation-direction）： 指定动画的播放方向，可以是正常方向、反向方向，或者交替播放。
animation-direction: alternate;
7. 动画填充模式（animation-fill-mode）： 指定在动画播放之前和之后元素的样式。
animation-fill-mode: forwards;
8. 动画状态（animation-play-state）： 指定动画的播放状态，可以是运行或暂停。
animation-play-state: running;
定义关键帧（Keyframes）：
使用 @keyframes 规则定义关键帧，即动画中的不同状态。
@keyframes myAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
这个例子定义了一个名为 myAnimation 的动画，包含了在 0%、50% 和 100% 时的关键帧，分别指定了不同的 transform 和 opacity 属性。
应用动画：
.element {
animation-name: myAnimation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
这个例子将定义的动画应用到一个名为 .element 的元素上，设置了动画的各种属性。
通过使用 CSS3 动画，你可以为页面元素创建出更为生动和吸引人的交互效果。
转载请注明出处：http://www.zyzy.cn/article/detail/12567/CSS