CSS3初学篇章_6(自定义动画)

自定义动画

由于有一部分低版本的浏览器并不支持的问题，所以这个样式要多做兼容，各大浏览器兼容前缀如下：

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

1. animation-name(动画名称)：
语法：animation-name ：none | <identifier>

说明：元素所应用的动画 名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

div{ animation-name : FromLeftToRight; }

2. keyframes (关键帧)：

语法：@keyframes <identifier> { [ from | to | <percentage> ]{ sRules } ] [,*]}

说明：被称为关键帧，其类似于 Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是 动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则
。

@keyframes FromLeftToRight{
　　from {left:; }
　　to {left: 800px; } 
}

3. animation-duration(动画时间)：

语法：animation-duration：<time>
说明：设置对象动画的持续时间

div{ animation-duration:1s }

4. animation-timing-function(动画的过渡速度)：

语法：animation- timing-function： ease | linear | ease-in | ease-out | ease-in- out

说明：设置对象动画的过渡速度类型

ease:默认值，逐渐变慢
linear:匀速过渡效果
ease-in:加速的过渡效果
ease-out:减速的过渡效果
ease-in-out:加速然后减速

div{ animation-timing-function : ease-in; }

5. animation-delay(动画延迟时间)：

语法：animation-delay：<time>

说明：设置对象动画的延迟时间

div{ animation-delay : ease-in; }

6. animation-iteration-count(动画执行次数)：

语法：设置对象动画执 行次数

说明：animation-iteration-count：infinite | <number>

infinite表示无限次数

div{ animation-iteration-count :; }

7. animation-direction(动画的顺序)：

语法：animation-direction： normal | reverse | alternate | alternate-reverse

说明：设置对象动画在循环中是否按照相反顺序执行

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

div{ animation-direction : normal; }

8. animation-play-state(动画的状态)：

语法：animation-play-state：running（运动） | paused（暂停）

说明：设置对象动画的状态

div:hover{ animation-play-state:paused; }

9. animation-fill-mode(动画时间之外的状态)：

语法：animation-fill-mode ： none | forwards | backwards | both

说明：设置对象动画时间之外的状态

none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态

div { animation-fill-mode : both; }

10. animation(动画复合属性)

语法：animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]

div{ animation: FromLeftToRight 2s ease-out forwards; }