动画 animation 关键帧 的总结(下)
04 animation-timing-function设置动画播放方式
animation-timing-function属性主要用来设置动画播放方式。
主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。
ease:默认值,动画开始时比较慢,然后加快速度,达到最大速度后再减慢速度。
linear:线性速度。动画开始时的速度和结束时的速度一样(匀速)。
ease-in:动画开始的速度较慢,然后速度加快。
ease-out:动画开始的速度很快,然后速度减慢。
ease-in-out:动画开始时比较慢,然后加快速度,达到最大速度后再减慢速度.
设置基础样式如下:
<body>
<div><i></i></div>
</body>
div{
width:500px;
height:200px;
border:3px solid green;
margin:100px auto;
}
div i{
display:inline-block;
width:20px;
height:20px;
background:green;
border-radius:15px 35px 0;
animation-name:h2;
animation-duration:10s;
animation-timing-function:ease-in;
}
通过不同的百分比切换不同的transform 如下:
@keyframes h2 {
0%{
transform: translate(0);
}
15%{
transform: translate(100px,180px);
}
30%{
transform: translate(150px,0);
}
45%{
transform: translate(250px,180px);
}
60%{
transform:translate(300px,0);
}
75%{
transform: translate(450px,180px);
}
100%{
transfrom: translate(480px,0);
}
}
效果呈现:
05 animation-iteration-count动画的播放次数
animation-iteration-count属性主要用来定义动画的播放次数。
1、其值通常为整数,但也可以使用带有小数的数字,其默认值为1,
这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite,动画将会无限次的播放。
06设置动画播放的方向
animation-direction属性:主要用来设置动画播放方向.
其主要有两个值:normal、alternate
1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;
2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放
例如:通过animation-direction属性,
将move动画播放动画方向设置为alternate,代码为:
animation-direction:alternate;
07 animation-play-state设置动画的播放状态
animation-play-state属性:主要用来控制元素动画的播放状态。
参数:
其主要有两个值:running和paused。
其中running是其默认值,主要作用就是类似于音乐播放器一样,
可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
设置基础样式如下:
<body>
<div><span></span></div>
</body>
div {
width: 300px;
height: 100px;
border: 3px solid pink;
margin: 50px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: green;
animation:move 3s ease-in .2s infinite alternate;
}
div span:hover{
animation-play-state:paused;
}
通过不同的百分比切换不同的transform 如下:
@keyframes move {
0%{
transform: translate(90px);
}
100%{
transform: translate(90px,90px);
}
}
效果呈现:(当鼠标移到绿盒子时paused生效,正在播放的动画停下来)
08设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下:
none:默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
forwards:表示动画在结束后继续应用最后的关键帧的位置
backwards:会在向元素应用动画样式时迅速应用动画的初始帧
both:元素动画同时具有forwards和backwards效果