多语言展示
当前在线:625今日阅读:175今日分享:29

CSS中animation动画属性使用详解

在用CSS制作动画时,经常需要使用animation的属性来定义动画的效果,常用的属性有animation-name、@keyframes等。下面介绍animation属性的使用。
方法/步骤
1

@keyframes属性,主要用于规定动画的规则。例如,下面代码设置了mymove名称的动画为从上至下滑动。

2

animation-name属性,主要用于规定@keyframes动画规则的名称。例如,下面设置了动画的名称。

3

animation-duration属性,主要用于规定动画执行的时间,单位可以是毫秒或秒。例如,下面定义了2秒。

4

animation-timing-function属性,主要用于规定动画运行的曲线。例如,下面设置动画曲线效果为linear。

5

animation-delay属性,主要用于设置动画开始执行的时间,一般用于延迟执行动画。

6

animation-iteration-count属性,主要用于设置动画执行的次数,例如,下面设置执行3次。

7

animation-direction属性,主要用于设置动画在下一次执行时,是否逆向执行。

推荐信息