animation属性怎么用

animation属性是CSS3中用于创建动画的强大工具，通过一系列子属性来控制动画的各种参数，下面将详细介绍animation属性的使用方法和技巧：

1、animationname: 指定要绑定到选择器的关键帧的名称，这个名称对应于一个预先定义好的@keyframes规则，如果有一个关键帧规则命名为fadein，那么可以将animationname: fadein;应用于元素以使用该动画。

2、animationduration: 定义动画完成一个周期需要多少秒或毫秒。animationduration: 2s;表示动画将在两秒钟内完成一个周期。

3、animationtimingfunction: 指定动画将如何完成一个周期，它可以是linear,ease,easein,easeout,easeinout或cubicbezier值等。animationtimingfunction: easeinout;使得动画在开始和结束时慢，在中间快。

4、animationdelay: 定义动画什么时候开始，可以是正值、负值或零。animationdelay: 3s;意味着动画将在延迟三秒后开始。

5、animationiterationcount: 定义动画应该播放多少次，可以是具体的数字，infinite表示无限次。animationiterationcount: 3;指定动画将播放三次。

6、animationdirection: 定义是否循环交替反向播放动画，值包括normal,reverse,alternate,alternatereverse。animationdirection: alternate;使动画在每个周期结束后反向播放。

7、animationfillmode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，值包括none,forwards,backwards,both。animationfillmode: forwards;确保动画结束后保持最后一个关键帧的样式。

8、animationplaystate: 规定动画是否正在运行或暂停，通过设置animationplaystate: paused;可以暂停动画，而animationplaystate: running;则可以让暂停的动画继续播放。

animation属性是一个注解性属性，它允许将所有动画属性合并为一个声明，这样可以更方便地管理多个动画设置。

“` css

div {

animation: fadein 2s easeinout 1 both;

上面的代码等同于单独声明每个属性：
``` css
div {
  animationname: fadein;
  animationduration: 2s;
  animationtimingfunction: easeinout;
  animationiterationcount: 1;
  animationfillmode: both;
}

掌握这些属性可以让你创建出各种复杂且吸引人的动画效果，从而提升网站的用户体验和视觉吸引力。