2021-05-28

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

 

@keyframes 规则

如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

animation-name：动画在@keyframes中的名字

例如：@keyframes name{

from{background: red;}

to{background: blue;}

}

div{

width: 100px;

height: 100px;

background: red;

Animation-name: name;

}

animation-duration：属性定义需要多长时间才能完成动画

例如：@keyframes name{

from{background: red;}

to{background: blue;}

}

div{

width: 100px;

height: 100px;

background: red;

Animation-duration: 5s;

}

 

animation-delay：属性规定动画开始的延迟时间；也可以为负值

例如：@keyframes name{

from{background: red;}

to{background: blue;}

}

div{

width: 100px;

height: 100px;

background: red;

animation-name: name;

animation-duration:5s;

animation-delay:2s;

}

 animation-delay: -2s;

如果为负值，就表示已经播放了多少时间一样

 

animation-iteration-count：属性指定动画应运行的次数

例如：@keyframes name{

from{background: red;}

to{background: blue;}

}

div{

width: 100px;

height: 100px;

background: red;

animation-name: name;

animation-duration:5s;

animation-delay:2s;

animation-iteration-count:3

}

 

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值
• reverse - 动画以反方向播放（向后）
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放，然后向前

 

 

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
• linear - 规定从开始到结束的速度相同的动画
• ease-in - 规定慢速开始的动画
• ease-out - 规定慢速结束的动画
• ease-in-out - 指定开始和结束较慢的动画
• cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值