css3过度和动画

一、过度（transition）

• transition：[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]；
• transition-property  参与过度属性
• transition-duration  过度的持续时间
• transition-timing-function  过度的动画类型
• transition-delay  延迟过度的时间
• 注意后面可以加多组参数，如下

 

二、参与过度属性  transition-property

• all：全部属性变化（默认值）
• none：不指定过度的css属性
• 指定的，如：width、height。。。。。。

 

三、过度的动画类型  transition-timing-function

• linear：线性过度。等同于贝塞尔曲线（0,0,1,1）
• 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）
• 贝塞尔曲线：cubic-bezier（number，number，number，number）；四个值在[0 , 1]区间内
• http://matthewlein.com/ceaser/

 

四、3D动画

 

注意：设置了3D效果设置时，就会变成有X，Y，Z 三条轴，还有实现3D效果设置一定得放在父级

 

五、关键帧 animation

 

-webkit-animation 各种参数

• -webkit-animation-name：动画名，也就是上面的关键帧名字
• -webkit-animation-duration：10s；第一动画时间，也可以看作是一帧长度
• -webkit-animation-timimg-function：ease-in-out；过度的动画类型，参数与 transition-timing-function 相同
• -webkit-animation-delay：2s；动画延时
• -webkit-animation-iteration-count：10；循环次数，infinite 为无限循环
• -webkit-animation-direction：alternate；反转动画轨迹
• -webkit-animation-play-state：paused；定义动画暂停

 

六、使用插件 animate.css

 

七、设置3D元素的基点位置  perspective-origin

perspective-origin: x-axis y-axis；

值	描述
x-axis	定义该视图在 x 轴上的位置。默认值：50%。 可能的值： left center right length %
y-axis	定义该视图在 y 轴上的位置。默认值：50%。 可能的值： top center bottom length %