CSS3 动画属性
1.@keyframes
如果想要创建动画,那么就必须使规则。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,可以多次更改CSS样式的设走。指定的变化发生时使用%,或关键字“from”和“to1’,这是和0%到100%相同的。0%是开头动画,100%是当动画完成。
为了获得最佳的浏览器支持,应该始终定义为0%和100%的选择器。
2.animation
所有动画属性的简写属性,除了animation-play-state属性外,它们的语法如下:
animation: name duration timing-function delay iteration-count direction fll-mode play-state;
3.animation-name
animation-name属性为@keyframes动画规定名称,语法如下:
animation-name: keyframename|none;
该属性有两个参数:
• keyframename:规定需要绑定到选择器的keyframe的名称。
• none:规定无动画效果(可用于覆盖来自级联的动画)。
4.animation-duration
animation-duration属性定义动画完成一个周期需要多少时间,单位是秒或毫秒,语法如下:
animation-duration: time:
5.animation-timing-function
animation-timing-function属性指定动画将如何完成一个周期。速度曲线定义动画从一套CSS样式变为另一套CSS样式所用的时间,速度曲线用于使变化更为平滑,语法如下:
animatiion-tiTning-function: value :
animation-timingHlinction使用的数学函数称为三次贝塞尔曲线、速度曲线。使用此函数时,可以使用自己的值或预先定义的值之一。
animation-timing-function属性的值可以是以下几种:
•inear:动画从头到尾的速度是相同的。
•ease:默认。动画以低速开始,然后加快,在结束前变慢。
•ease-in:动画以低速开始。 o ease-out:动画以低速结束。
•ease-in-out:动画以低速开始和结束。
•cubic-bezier(n,n,n,n):在cubic-bezie「函数中使用自己的值。可能的值是0~1的数值。
6.animation-delay
animation-delay属性定义动画什么时候开始,其值的单位可以是秒(s)或毫秒(ms)。
7.animation-iteration-count
animation-iteration-count属性定义动画应该播放多少次,默认值为1,属性的值可以使以下 两种:
• n:一个数字,定义应该播放多少次动画。
• infinite:指定动画应该播放无限次(永远)。
8.animation-direction
animation-direction属性定义是否循环交替反向播放动画,默认是normal,语法如下:
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit:
animation-direction属性的值可以使以下几种:
© normal:默认值,动画按正常播放。
© reverse:动画反向播放。
© alternate:动画在奇数次(1、3、5……)正向播放,在偶数次(2、4、6……)反向播放。
© alternate-reverse:动画在奇数次(1、3、5 )反向播放,在偶数次(2、4、6 )正向播放。
© Initial:设置该属性为它的默认值。
© Inherit:从父元素继承该属性。
9.animation-play-state
animation-play-state属性指定动画是否正在运行或已暂停,默认是running,语法如下:
animation-play-state: paused|running;
animation-play-state属性的值可以是以下两种:
© paused:指定暂停动画。
© running:指定正在运行的动画。
点击加载更多评论>>