[分享]css3所有动画属性

CSS3中包含了许多动画属性，可以用来制作漂亮的动画效果。

/* 动画名字 */
animation-name: my-animation;

/* 动画执行时间 */
animation-duration: 2s;

/* 动画延迟时间 */
animation-delay: 1s;

/* 动画执行次数 */
animation-iteration-count: infinite;

/* 动画执行方式 */
animation-timing-function: ease;

/* 动画播放状态 */
animation-play-state: running;

/* 动画方向 */
animation-direction: alternate;

/* 动画填充模式 */
animation-fill-mode: forwards;

/* 动画触发事件 */
animation-event: click; 

这些属性可以用来控制动画的各个方面，比如动画名字、执行时间、延迟时间、播放次数等。以下是每个属性的详细说明：

• animation-name: 设置动画的名字，可以通过该名字在 CSS 中控制动画的各个属性。
• animation-duration: 设置动画执行的时间，单位为秒（s）或毫秒（ms）。
• animation-delay: 设置动画执行的延迟时间，单位为秒（s）或毫秒（ms）。
• animation-iteration-count: 设置动画执行的次数，可以设置为具体的次数，也可以设置为 infinite，表示无限次执行。
• animation-timing-function: 设置动画执行的方式，有多种可选方式，如 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier 等。
• animation-play-state: 设置动画的播放状态，可以设置为 running 或 paused。
• animation-direction: 设置动画执行的方向，可以设置为 normal、reverse、alternate、alternate-reverse。
• animation-fill-mode: 设置动画执行的填充模式，可以设置为 none、forwards、backwards、both。
• animation-event: 设置动画触发的事件，可以设置为 click、hover、focus 等。

以上是 CSS3 中所有的动画属性，通过这些属性的组合使用，可以实现各种炫酷的动画效果。