自定义动画
1.animation-name(动画名称)
元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。
语法:
animation-name :none | <identifier>
例:
div{
-webkit-animation-name : FromLeftToRight;
animation-name : FromLeftToRight;
}
2.keyframes(关键帧)
被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{...}”,括号中就是一些不同时间段样式规则。
语法:
@keyframes <identifier> {
[ from | to | <percentage> ]{ sRules } ] [,*]
}
例:
@-webkit-keyframes FromLeftToRight{
from {left:; }
to {left: 800px; }
3.animation-duration(动画时间)
设置对象动画的持续时间
语法:
animation-duration:<time>
例:
div{
-webkit-animation-duration:1s;
animation-duration:1s
}
4. animation-timing-function(动画的过渡速度)
设置对象动画的过渡速度类型
语法:
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out
例:
div{
-webkit-animation-timing-function : ease-in;
animation-timing-function : ease-in;
}
5. animation-delay(动画延迟时间)
设置对象动画的延迟时间
语法:
animation-delay:<time>
例:
div{
-webkit-animation-delay : 1s;
animation-delay : ease-in;
}
6. animation-iteration-count(动画执行次数):
设置对象动画的延迟时间
语法:
animation-iteration-count:infinite | <number>
infinite表示无限次数
例:
div{
-webkit-animation-iteration-count :;
animation-iteration-count :;
}
7. animation-direction(动画的顺序)
设置对象动画在循环中是否按照相反顺序执行
语法:
animation-direction:normal | reverse | alternate | alternate-reverse
说明:
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
例:
div{
-webkit-animation-direction : normal;
animation-direction : normal;
}
8.animation-play-state(动画的状态)
设置对象动画的状态
语法:
animation-play-state:running | paused
说明:
running:运动
paused:暂停
例:
div:hover{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
9. animation-fill-mode(动画时间之外的状态)
设置对象动画时间之外的状态
语法:
animation-fill-mode : none | forwards | backwards | both
说明:
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态
例:
div {
-webkit-animation-fill-mode : both;
animation-fill-mode : both;
}
10. animation(动画复合属性)
通过 animation ,我们能够创建自定义动画,这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript
语法:
animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]
例:
div{
-webkit-animation: FromLeftToRight 2s ease-out forwards;
animation: FromLeftToRight 2s ease-out forwards;
}