学习笔记day6：CSS3动画属性

总结：

1: CSS动画：@keyframes  animation；ie10+；加-webkit前缀；

animation 则是属于关键帧动画的范畴;

它本身被用来替代一些纯粹表现的javascript代码而实现动画。

基于animation和@keyframe 的动画一方面也是为了实现表现与行为的分离;

另一方面也使得前端设计师可以专注得进行动画开发而不是冗余的代码中。

 

2: CSS过渡：transition；ie10+;加-webkit前缀；

transition 是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。

 

3: 3D转换：transform;ie10+;加-webkit前缀；

4: 2D转换：transform；ie9+；加-webkit前缀；

 

重点：animation 需要用@keyframes写一个动画帧集合。    transition：控制属性变化的过渡     transform：控制属性自身的拉伸旋转。

 

难点：

贝塞尔曲线:

linear：cubic-bezier(0,0,0.25,1);

ease: cubic-bezier(0.25,0.1,0.25,1);

ease-in:cubic-bezier(0.42,0,1,1);

ease-out:cubic-bezier(0,0,0.58,1);

ease-in-out:cubic-bezier(0.42,0,0.58,1);

 

矩阵函数matrix（a,c,e,b,d,f）:

指定一个2D变换，相当于直接应用一个[a c e b d f]变换矩阵。

注意：c,e的值用正弦或余弦值表示

 

附录：腾讯动画库：http://isux.tencent.com/css3/

转载于:https://www.cnblogs.com/fengluzheweb/p/5435293.html