CSS3之动画

Posted 2021-04-09 前端技术博文

一、CSS3动画简介

animation实现动画主要由两个部分组成：

• 通过类似Flash动画中的关键帧来声明一个动画；

• 在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果

1、关键帧

在CSS3中，把@keyframes称为关键帧。

由@keyframes开头，后面紧跟着“动画名称”加上一对花括号“{…}”，括号中是不同时间段样式规则。

一个@keyframes中的样式规则是由多个百分比构成的，如0%~100%。可以使用“from”、“to”代表一个动画从哪开始，到哪结束。from就相当于0%，to相当于100%。

语法：

 1@keyframes IDENT{
 2  from{
 3   /*css样式*/
 4  }
 5percentage{
 6   /*css样式*/
 7  }
 8to{
 9   /*css样式*/
10  }
11}

可以将关键词from和to换成百分比：

 1@keyframes IDENT{
 2  0%{
 3   /*css样式*/
 4  }
 5  percentage{
 6   /*css样式*/
 7  }
 8  100%{
 9   /*css样式*/
10  }
11}

其中IDENT是动画名称，可以取任意定义的动画名称。percentage是一个百分比值，用来定义某个时间段的动画效果。

2、应用动画

要在CSS中为元素应用动画，首先要创建一个已命名的动画，然后将它附加到该元素属性声明块中的一个元素上。这个要创建的动画，必须使用@keyframes声明。
示例：

 1      /*1、声明动画*/ 
 2      @keyframes wobble{
 3        0%{
 4            margin-left:100px;
 5            background:green;
 6        }
 7        40%{
 8            margin-left:150px;
 9            background:orange;
10        }
11        60%{
12            margin-left:75px;
13            background:blue;
14        }
15        100%{
16            margin-left:100px;
17            background:red;
18        }
19      }
20      /*2.应用动画*/
21      .demo{
22        margin-left:100px;
23        background:blue;
24        animation:wobble .2s ease-in;
25      }

二、CSS3动画属性

CSS3共具有八个子属性。
语法：animation:<animation-name>|<animation-duration>|animation-timing-function>|<animation-delay>|<animation-iteration-count>|<animation-direction>|<animation-play-state>|animation-fill-mode>

参数说明：

• animation-name：指定关键帧的名字，必须对应一个@keyframes规则

• animation-duration：设置动画播放所需时间，一般以秒为单位

• animation-timing-function：设置动画播放方式

• animation-delay：指定动画开始时间，一般以秒为单位

• animation-iteration-count：指定动画播放的循环次数

• animation-direction：指定动画的播放方向

• animation-play-state：控制动画的播放状态

• animation-fill-mode：设置动画的时间外属性

所有的属性都可以合在一起写，中间用空格隔开。

1、调用动画

animation-name主要用来调用动画，调用的是通过@keyframes关键帧定义好的动画。
语法：animation-name:none|IDENT，主要有两个值。

• none：默认值，没有任何动画效果，可以用于覆盖任何动画。

• IDENT：有@keyframes定义的动画名称

2、设置动画播放时间

animation-duration用来设置CSS3动画播放时间，语法：animation-duration:<time>，默认值为0，单位为秒，指定元素播放动画所持续的时间。

3、设置动画播放方式

animation-timing-function是指元素根据时间的推进来改变属性值的变换速率。和transition中的transition-timing-function类似。

4、设置动画开始播放的时间

animation-delay用来定义动画开始播放的时间，是延迟还是提前等。换句话说，animation-delay用来定义在浏览开始执行动画之前的等待时间。

5、设置动画播放次数

animation-iteration-count属性主要用来定义动画播放多少次，值通常为整数。
语法：  animation-iteration-count：infinite|<number>，如果取值为infinite，动画将会无限次播放。

6、设置动画播放方向

animation-direction用来指定动画播放的方向，语法：animation-direction:normal|alternate，主要有两个值。

• normal：默认值，动画每次循环都是向前播放

• alternate：动画播放为偶数次则向前播放，为奇数次则向反方向播放

7、设置动画的播放状态

animation-play-state属性用来设置元素动画的播放状态，语法：animation-play-state:running|paused，主要有两个值。

• running：默认值，将暂停的动画重新播放，重新播放不一定是从元素动画的开始播放

• paused：将正在播放的动画暂停，如果暂停了动画，元素的样式将回到最原始设置状态

8、设置动画时间外属性

animation-fill-mode定义在动画开始之前和动画结束之后发生的操作。语法：animation-fill-mode:none|forwards|backwards|both

• none：默认值，表示动画按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

• forwards：动画在结束后继续应用最后关键帧的位置

• backwards：在向元素应用动画样式时迅速应用动画的初始帧

• both：动画同时具有forwards和backwards效果

默认情况下，动画不会影响它的关键帧之外的属性，但使用animation-fill-mode属性，可以修改动画的默认行为。