33.keyframe
关键帧,类似于flash中的关键帧,以@keyframes开头紧跟着动画名称加上花括号{。。。},括号中表示不同时间段样式规则
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
样式规则中可以创建多个百分比,分别给每个百分比中给需要有的动画效果加上样式,而达到不断变化的效果,还可以使用from和to表示(其中from表示0%,to表示100%)
Chrome 和 Safari 需要前缀 -webkit-;Foxfire 需要前缀 -moz-。
使用方法:
使用@keyframe标记动画名称
@keyframes wobble {
0% {
margin-left: 100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
在需要变化的元素中使用animation属性
div:hover{
animation: wobble 5s ease .1s;
}
调用动画:
animation-name属性用来调用keyframes定义好的动画(名称必须和keyframes后的名称相同,包括大小写)
animation-name: none | IDENT[,none|DENT]*;
当为none时,表示没有任何效果,用来覆盖任何动画
注意:需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀,Firefox加上-moz-。
播放动画时间(持续时间)
animation-duration: <time>[,<time>]*
单位:s秒
默认为:0
播放方式:
如同transition-function
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
开始播放时间:
animation-delay:<time>[,<time>]*
与transition-delay相同
播放次数:
animation-iteration-count
animation-iteration-count: infinite | <number> [, infinite | <number>]*
通常为整数,默认值为1(表示从开始到结束只循环一次),取值为infinite(表示无限次循环)
播放动画方向:
animation-direction:normal | alternate [, normal | alternate]*
normal:表示每次循环都向前
alternate:表示播放第偶次向前,奇次反方向
播放动画状态:
animation-play-state:running|paused
默认值为running,可以通过paused停下来,也可以通过running将暂停的动画重新播放(不一定是从元素开始播放,而是暂停的位置),如果暂停动画播放,元素将回到最原始设置的状态
设置动画时间外属性:
定义在动画开始之前和结束之后发生的操作。
在默认情况下,动画不会影响关键帧以外的属性,使用此关键字可以修改动画的默认行为。