css动画效果之animation的常用样式有哪些

CSS动画效果在网页设计和开发中经常用到，能够增加网页的交互性和视觉效果，提高用户体验。而animation是CSS3中一个非常有用的样式属性，可以实现多种动画效果。本文将介绍animation的常用样式，以及它们的用法和效果。

1、animation-name

animation-name指定一个用来描述动画的关键帧名称，可以重复利用已经定义的关键帧名称来实现多个元素动画的一致性或集成。语法如下：

animation-name: name1, name2, ...;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
}

2、animation-duration

animation-duration指定了一个动画周期的持续时间，单位为秒或毫秒。语法如下：

animation-duration: time;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
}

3、animation-timing-function

animation-timing-function属性控制动画的速度曲线，可以让动画在开始、结束的时候产生特定的效果，如加速、减速、变速等。语法如下：

animation-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}

4、animation-delay

animation-delay指定动画开始之前的延迟时间，可以让动画有序地依次播放。语法如下：

animation-delay: time;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
    animation-delay: 1s;
}

5、animation-iteration-count

animation-iteration-count指定动画的播放次数，可以让动画无限循环播放或播放指定次数。语法如下：

animation-iteration-count: number|infinite;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

6、animation-direction

animation-direction指定了一个动画的播放方向，可以让动画正常播放、反向播放或播放循环。语法如下：

animation-direction: normal|reverse|alternate|alternate-reverse;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
    animation-direction: alternate;
}

7、animation-fill-mode

animation-fill-mode属性指定了一个动画在播放前或播放后应用的样式规则。它的功能有两个：一是在动画播放前设置元素的样式，二是在动画结束后保持元素最终状态的样式。语法如下：

animation-fill-mode: none|forwards|backwards|both;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

8、animation-play-state

animation-play-state属性指定动画是运行还是暂停，可以通过JavaScript来控制动画的播放和暂停。语法如下：

animation-play-state: running|paused;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation-name: myAnim;
    animation-duration: 2s;
    animation-play-state: paused;
}

9、animation

animation属性是animation的简写形式，其中包含了所有animation属性。语法如下：

animation: name duration timing-function delay iteration-count direction fill-mode;

示例代码如下：

@keyframes myAnim{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
div{
    animation: myAnim 2s cubic-bezier(0.42,0,0.58,1) 1s infinite alternate forwards;
}

本文介绍了animation的常用样式，如animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state和animation。它们是实现CSS动画效果必不可少的样式属性，掌握这些样式可以帮助我们实现丰富有趣的动画效果，提高网页的交互性和吸引力。