在制作自定义动画时,有以下八个样式可供选择:
- animation-name(动画名称):元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。
- animation-duration(动画时间):设置对象动画的持续时间
- animation-timing-function(动画的过渡速度):设置对象动画的过渡速度类型
- animation-delay(动画延迟时间):设置对象动画的延迟时间
- animation-iteration-count(动画执行次数):设置对象动画的延迟时间
- animation-direction(动画的顺序):设置对象动画在循环中是否按照相反顺序执行
- animation-play-state(动画的状态)
- animation-fill-mode(动画时间之外的状态)
在定义了这些动画的基本属性之后,我们制作动画还需要制定动画的关键帧keyframes;
其用法为
@keyframes <identifier> {
[ from | to | <percentage> ]{ sRules } ] [,*]
}
通过动画名称来确定是哪一个元素要产生动画,通过时间段内特殊点的样式来使得动画效果符合预期。
例:
*{margin:0;padding:0;}
.box{
width:100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}
通过以上设置,我们便做出了一个简单的平移动画效果,想要让动画的效果更佳多样化,则必须对动画中的各个属性有更佳详尽的了解。
animation-timing-function的语法如下:
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out
其各个属性值都是描述动画的快慢效果,默认值为ease。
animation-delay设置的是动画的延迟,即在多长时间后,动画效果开始执行。
例:
.box{
width:100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
animation-delay:2s;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}
animation-iteration-count:infinite | <number>
animation-iteration-count表示动画执行的次数,若其值区为infinite,则表示动画会无限次执行。
例:
.box{
width:100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
animation-iteration-count:infinite;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}
animation-direction:normal | reverse | alternate | alternate-reverse
表示动画执行的放向及方式,例:
.box{
width:100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
animation-delay:2s;
animation-iteration-count:infinite;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}
.alternate{
animation-direction:alternate;
background:green;
}
.alternate-reverse{
animation-direction:alternate-reverse;
background:blue;
}
.reverse{
animation-direction:reverse;
background:yellow;
}
<div class="box"></div>
<div class="box alternate"></div>
<div class="box reverse"></div>
<div class="box alternate-reverse"></div>
通过上述代码的效果,我们可以看出其各个属性值所表示的动画方向及效果。
animation-play-state:running | paused
表示动画的状态,暂停还是执行。
例:
.box{
width:100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
animation-delay:2s;
animation-iteration-count:infinite;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}
.box:hover{
animation-play-state:paused;
}
.box:active{
animation-play-state:running;
}
在上述例子中,鼠标移入时,动画暂停,移出时动画继续。在任何动画效果停止的状态,用鼠标点击元素,动画进行。
animation-fill-mode : none | forwards | backwards | both
设置对象动画时间之外的状态:
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态(@keyrames中100%时各个属性值所描述的状态)
backwards:设置对象状态为动画开始时的状态(@keyrames中0%时各个属性值所描述的状态)
both:设置对象状态为动画结束或开始的状态
例:
.box{
width:100px;height:100px;background:red;
animation-name:fly;
animation-duration:1s;
animation-delay:2s;
animation-fill-mode:forwards;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}
我们也可以将上述的动画简写:
animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]
则,上述的例子可写为:
.box{
width:100px;height:100px;background:red;
animation:fly 1s ease 2s forwards;
}
@keyframes fly{
0%{margin-left:0px;}
100%{margin-left:300px;}
}