css3 transition 动画

10 CSS3过渡

特点：

1）本质上是一帧动画，一帧结束后，就没有了

2）过渡的效果的实现，必须通过用户的行为，可能触发，行为：hover，focus，click，JS代码

1、transition的属性

transition-property:指定元素的过渡属性

transition-duration：规定了过渡时间。

transition-timming-function：规定以何种方式过度

ease：表示快速

ease-in：先慢后快

eaxe-out：先快后慢

linear：线性的变化

steps（）：规定过度分几步完成。

2、缩写

transition：property duration function delay

用空格隔开

3、触发过渡

只有当用户触发事件，过渡事件才能进行，比如用户点击，鼠标移入移出等等，这是他的一个属性

4、局限性

11 CSS3动画

1、animation动画属性

animation-name ：取值为动画名称

animation-duration：规定动画完成所需的时间

animation-timming-function:规定以什么方式完成动画

animation-delay：规定动画延迟多久执行

animation-iteration-count：规定动画执行的次数（infinite无限循环）

animation-direction：规定动画执行的方向

（alternate规定动画的来回执行）

animation-state：规定动画是否执行（paused表示暂停）

animation-fill-mode：规定动画开始之前和结束之后发生的操作，默认值为none；forwards表示动画结束元素保留到最后帧的状态

backwards则与forwards相反

2、@keyframes

规定一个动画，包括动画名称，

form规定初始状态，to规定动画的末状态

 

0%规定初始状态，100%规定动画最后帧