H5+CSS3之flush介绍

css属性

  property,duration,timing-function,delay

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。  （Linear,ease,ease-in,ease-out,ease-in-out）
transition-delay	定义过渡效果何时开始。

  Transform :用于元素的变形处理  属性:  translate,Rotate,scale,skew  (平移 旋转，缩放，斜切)

1. @-wbkit-keyframes myfirst {

      }

    -常用参考手册-

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>,<number>, <number>, <number>)

默认值：ease

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

• linear：

• 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

• ease：

• 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

• ease-in：

• 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

• ease-out：

• 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

• ease-in-out：

• 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

• step-start：

• 等同于 steps(1, start)

• step-end：

• 等同于 steps(1, end)

• steps(<integer>[, [ start | end ] ]?)：

• 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

• cubic-bezier(<number>, <number>, <number>, <number>)：

• 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-fill-mode：

animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

• none：

• 默认值。不设置对象动画之外的状态

• forwards：

• 设置对象状态为动画结束时的状态

• backwards：

• 设置对象状态为动画开始时的状态

• both：

• 设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

• 如果提供多个属性值，以逗号进行分隔。

• 对应的脚本特性为animationFillMode。

animation-direction

animation-direction：normal | alternate [ , normal | alternate ]*

默认值：normal

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

• normal：

• 正常方向

• alternate：

• 正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动

• 如果提供多个属性值，以逗号进行分隔。

• 对应的脚本特性为animationDirection。