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: 0; } 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 : 2; }
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; }