animationo动画

animation动画

一.基础

1. animation-name 动画名称，默认为none;

2. animation-duration 动画的持续时间，默认为0；

3. animation-timing-function 动画的过渡类型 ，默认为ease

• ease :线性过渡
• linear：平滑过渡
• ease-in：由慢到快
• ease-out:由快到慢
• ease-in-out：由慢到快再到慢
• cubic-bezier(number,number,number,number):特定的贝塞尔曲线类型，number在【0，1】区间内取值

4. animation-delay 动画延迟的时间

​ animation-iteration-count 动画的循环次数，无限循环为infinite，默认为1

5. animation-direction 动画在循环中是否反向运动，正方向为normal，alternate为常向和反向交替运动，具体为第偶次

​ 正向运动，第奇数次向反方向运动，默认为normal

6. animation-play-state 表示动画的状态，默认值为running，表示正在运动，paused为暂停。

​ 以上参数可以同时赋予多个值，只要注意各个参数顺序对应即可。

二：详细

示例

`#demo{``

​ <!--指定动画名称-->

​ animation-name:animation1,animation2;

​ <!--指定动画时长-->

​ animation-duration：2s 1s;

}

同时定义两个动画，但动画的具体内容是在属性@keyframes指定，animation负责元素指定引用的动画，并对动画的时间，过渡类型等作出设置，这样分开设置可以提高动画的独立性和利用率。

对于简单的线性动画可以直接使用from和to，或者0%和100%为其指定初始和结束状态：

`@keyframes animation{``

​ from/0%{

}

​ to/100%{

}

}

若是对于复杂的动画，则需要用到percentage百分比，animation支持用0%指定的某一百分比时动画所执行的效果：

@keyframes animation{

​ form/0%{ }

​ 20%{ }

​ 40%{ }

​ 60%{ }

​ 80%{ }

​ to/100%{ }

}

animation简写：

animation: animation 2s linear;

animation也可以搭配transform无疑能做出一些不错的动画。

区别

animation与transform和transition的区别：
transition和transform是需要用户触发才会表现出动态的效果，animation无需触发条件，绑定动画即可。

animation增加了一个animation-fill-mode 这个属性控制设置动画以外的状态，forwards属性在动画结束时

保留在100%位置而不回撤。

兼容性问题

-webit-animation

-moz-animation

-o-animation

animation

同时调用以上元素，则可以兼顾主流浏览器。