css3动画属性有哪些

1、css3动画属性有哪些css3的动画属性1、animation-name属性animation-name属性：定义动画名称，用于指定由规章定义的动画的一个或多个名称。注：animation-name属性必需与规章keyframes协作用法，由于动画名称是由keyframes定义声明的，假如提供多个属性值用逗号隔开。keyframes规章相当于一个命名空间，后面跟一个名词，假如在class中的animation-name定义了与之对应的name就可以执行动画。2、animation-duration属性animation-duration属性用于指定执行一个周期动画应当花多长时光。时光以秒或毫秒

2、指定，并且最初设置为0，这意味着动画即时发生；我们可以指定一个持续时光或多个以逗号分隔的持续时光。3、animation-timing-function属性animation-timing-function属性是用来设置播放方式的，它可以指定定时函数，该函数定义动画对象随时光的速度。它描述了动画在其持续时光的一个周期内如何发展，允许它在其过程中转变速度。取值如下：ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。linear：线性效果，速度将从开头到结束稳定。ease-in：渐显效果，动画将缓慢启动，然后获得更多加速并稳定到持续时光结束

3、。ease-out：渐隐效果，动画将迅速启动，然后减速并稳定到持续时光结束。ease-in-out：渐显渐隐效果，它是组合了ease-in和ease-out。动画或过渡将开头缓慢，在中间加速，然后减速直至结束。step-start：马上跳转到动画结束状态，动画或过渡将骤然变为结束状态并保持在该位置直到动画结束。step-end：动画或过渡保持其开头状态，直到动画执行结束，挺直跳转到其动画结束状态。step(,start|end)：step()可以将转换的持续时光划分为相等大小的间隔；或指定输出百分比的变幻是发生在间隔的开头还是结束。第一个参数number为指定的间隔数，即把动画分为n步阶段性显

4、示，其次个参数默认为end，设置最后一步状态，start为结束时的状态，end为开头时的状态，若设置与animation-fill-mode的效果矛盾，以animation-fill-mode的设置为动画结束状态。1.pngcubic-bezier(,)：特别的立方赛贝尔曲线效果4、animation-delay属性animation-delay属性：定义动画何时开头（开头时光），它允许动画在应用后的某个时光开头执行，或者在应用之前看似已经开头执行一段时光。初始值为0，这意味着动画将在应用于元素后立刻开头播放。正时光值表示偏移量，该偏移量定义动画开头之间（通过动画属性将动画应用于元素时）与开头

5、执行时的延迟时光。我们还可以为animation-delay提供负值。负值，就像&39;0&39;一样，意味着动画一旦被应用，就会立刻执行，但是由延迟的肯定值自动推动，就好似动画在过去已经启动了指定的时光，并且它似乎已经在其嬉戏周期的中途开头了。例如，假如为animation-delay提供-2s的值，动画将立刻启动，只要它被应用，但它将显示为它已经启动2s之前，你已经应用它。5、animation-iteration-count属性animation-iteration-count属性：用于指定动画停止前播放动画循环的次数，即：播放次数。初始值为1，表示动画将从头到尾播放一次

6、；通常会取infinite值，表示无限循环播放。6、animation-direction属性animation-direction属性：用于指定动画是否应在某些或全部循环或迭代中反向播放，即：播放方向。该属性可能取的值：normal：正常方向reverse：动画反向运行，方向始终与normal相仿alternate：动画会循环正反交替运动7、animation-fill-mode属性animation-fill-mode属性定义动画在播放后的状态。更详细地说，它定义了在动画延迟时光内以及动画完成执行后应用于元素的样式。该属性可能取的值：none：默认值，不设置样式forwards：结束后保持

7、动画结束的状态backwards：结束后返回动画开头时状态both：结束后可遵循forwards和backwards两个规章8、animation-play-state属性animation-play-state属性：用于检索或设置对象动画的状态，即：指定css动画是正在运行还是暂停。该属性可能取的值：running：默认值，运动；paused：暂停。我们也可以用法动画的简写属性animation属性来一次性设置动画的样式：/*一个动画定义的语法*/animation:animation-nameanimation-durationanimation-timing-functionanimat

8、ion-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;/*两个动画定义，用逗号隔开*/animation：animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state,animation-namea

9、nimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;css3动画属性和keyframes规章创建容易动画：代码实例：html代码：php中文网css代码：importurl(bodybackground-color:f5f5f5;color:555;font-size:1.1em;font-family:&39;gentiumbasic&39;,ser

10、if;.containermargin:50pxauto;max-width:700px;.textfont-size:3em;font-weight:bold;color:009966;-webkit-transform-origin:leftcenter;-ms-transform-origin:leftcenter;transform-origin:leftcenter;-webkit-animation:fall4sinfinite;animation:fall4sinfinite;-webkit-keyframesfallfrom,15%-webkit-transform:rotat

11、e(0)translatex(0);transform:rotate(0)translatex(0);opacity:1;-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);animation-timing-function:cubic-bezier(.07,2.02,.67,.57);50%,60%-webkit-transform:rotate(90deg)translatex(0);transform:rotate(90deg)translatex(0);opacity:1;-webkit-animation-

12、timing-function:cubic-bezier(.13,.84,.82,1);animation-timing-function:cubic-bezier(.13,.84,.82,1);85%,to-webkit-transform:rotate(90deg)translatex(200px);transform:rotate(90deg)translatex(200px);opacity:0;keyframesfallfrom,15%-webkit-transform:rotate(0)translatex(0);transform:rotate(0)translatex(0);opacity:1;-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);animation-timing-function:cubic-bezier(.07,2.02,.67,.57);50%,60%-webkit-transform:rotate(90deg)translatex(0);transform:rotate(90deg)translatex(0);opacity:1;-webkit-animation-timing-function:cubic-b