CSS3动画相关属性的总结

css3动画相关属性的总结

概述

在最近的项目中，好多都要用到微交互，而这些微交互与css3的动画属性密不可分，例如下面的的微交互：

      

      

CSS3动画相关属性有：transition,transform,animation，下面对这些属性和属性值做一个总结。

transition过渡属性

（1）概述

W3C 的解释：CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

即：在改变元素css属性值时，transition可以让这个改变在自己指定时间里平滑的进行。

（2）哪些css属性改变时可以应用transiton，达到平滑过渡的效果呢？

不是所有的css属性都能应用transition,常见的border、background、位置属性margin 都是可以用transiton属性的

详细可以参考这个网址：   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

（3）transition的书写方法

a. transition-property

指定要应用transiton的属性值，可以是多个,例如：

-webkit-transition-property: width height background-color font-size left

b. transition-duration

指定持续时间

c. transition-timing-function

指定一个函数来定义如何计算属性的中间值。

1) 贝塞尔曲线函数--最常用的贝塞尔曲线函数 给出了关键字，方便调用  如： linear、ease…

1. linear 匀速    cubic-bezier(0.0, 0.0, 1.0, 1.0)

1. ease  慢-快-慢
2. ease-in 慢-快
3. ease-in-out 慢-快-慢
4. ease-out 快-慢

2) steps函数

1. step-start     -> steps(1,start)  每个帧变化一次 开始的帧忽略 立即跳到最后状态
2. step-end      -> steps(1,end)   每个帧变化一次 最后一帧忽略

 3). You can also choose easing from  Easing Functions Cheat Sheet .

你可以从这个网址 选择需要的缓动函数 http://easings.net/zh-cn

d. transition-delay

定义transiton作用之前的等待时间

e. 短写方式

div {

    transition : <property> <duration> <timing-function> <delay> ;

}

     transition : all 1 s ease-out ;

（4）与Javascript相关的处理

js检测 transition的开始、结束

el . addEventListener ( "transitionend" , updateTransition , true );   监测 transition的结束

el . addEventListener ( "transitionrun" , signalStart , true );   监测 transition的开始（在delay延迟 之前就触发了）

el . addEventListener ( "transitionstart" , signalStart , true );   监测 transition的开始 （在delay之后触发）

（5）截止目前的兼容性

          

animation动画属性

（1） CSS animations 相比 脚本动画的三个优势：

使用简单、动画效果平滑、更高效

（2）animation的书写方法

 1)  aniamtion-delay

动画延迟多长时间执行

2）animation-direction

  normal   -> 动画正常执行

  reverse    -> 动画 以相反的路径执行

  alternate ->  动画来回播放

  alternate-reverse  -> 上述两个属性的结合

3）animation-duration

动画持续时间

4）animation-iteration-count  

动画迭代重复次数

5）animation-name    

动画的名字 @keyframes配置的是该动画具体的表现形式

6）animation-play-state

runing  指定动画执行

paused  指定动画停止

7）animation-timing-function、

同 transition的 transition-timing-function

ease、ease-in、ease-out、ease-in-out、liner、step-start、step-end...

8）animation-fill-mode

none -> 不应用该属性

forwards ->   动画执行到最后frame的时候，保持住最后动画frame状态，eg：最后frame中定义的是font-size:100px;那么最后动画就会保持在 font-size:100px的状态

backwards ->  动画目标首先应用第一个frame里的值，在animation-delay过程中也保持这个值

both ->    forwards 和  backwards 的结合

（3）用keyframes定义动画序列

配置了动画执行时间后 利用keyframes配置动画的样子

from 代表 0% 开始动画样式   to 代表 100%  动画结束的样子 中间可以自己配置额外的keyframes ，写法如下：

@keyframes slidein {

  from {

    margin-left : 100% ;

    width : 300% ;

  }

    to {

    margin-left : 0% ;

    width : 100% ;

  }

}

栗子

      

上述的动画结合了CSS3的animation和transform，实现代码也很简洁：

       

参考

1. http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

3. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations