css3动画学习笔记

动画（颜色高度等属性的变化）

css3对动画的实现有过渡和帧动画

1.谁是动画属性

css3动画包括 transition 和 animation

动画常常和transform 属性常用 但是 transform不是动画属性 只是静态类

（transform会主动开启浏览器的渲染加速，会让动画更加细腻，而且，在实现动画的时候，不会改变原有文档流的结构）

animation 一上来就可以加载动画 || 而transition 需要一个类的触发，需要Js等做个添加才能实现

 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2.动画的发展

IE9以前的浏览器是不兼容动画的

开发前去查事件监听兼容性

 

3.学习css3动画的目标

第一阶段：熟练使用 transition 和 animation 中的 name during

第二阶段：动画库

第三阶段：复杂动画的开发

 

二、transition 基础写法&一些经验

属性名称（property）

过渡时间（duration）延迟时间（delay）

时间函数（timing-function）

 

---

 transition当文档流有变化的时候才会过渡 ，要有个初始化 ，需要元素提前在文档中有个初始的属性

小贴士：

display 不能和 transition 一起使用（如果display:none 时，在文档流中的初始属性理论上是不存在的）

transition 后面尽量不要跟all (占用大量资源)

常见闪动 可以 perspective 和 backface-visibility (3d里的)

---

 

三、 animation 基础写法&一些经验

 动画名称（name） --@keyframes

过渡时间（duration）延迟时间（delay）

时间函数（timing-function）

播放次数（iteration-count） 播放方向（direction） 停止播放的状态（fill-mode） 是否暂停（play-state）

----------------------------------------------------------------

animation 解决 transition display:none 的 bug

----------------------------------------------------------------

 

四、时间函数（分为线性和非线性）

时间函数， 管理着动画在 单位帧内播放的速度曲线

它是  使用 名为 三次贝塞尔函数的数学函数

预设值 linear ease ease-in ease-out ease-in-out

cubic-bezier(n,n,n,n)

 

时间函数 -非线性

能够实现动画的阶跃式变化，不是线性的过渡

Steps(1,start|end)

steps 作用的是每个关键帧，而不是整个时间

 

五、过渡和动画在js中监听

监听的事件：

animationstart 

animationend 、transitionend

animationiteration

 监听的事件（兼容）

在360、Safari和部分chrome下需要这样WebkitAnimationEnd

IE和Firebox已经做了兼容直接写就可以