CSS animation 属性
慕朝明
这是一个有点类似于前面学的transition的属性。这个属性用于制作关键帧动画。3
1.animation属性也是一个简写属性，用于设置六个动画属性。
用法：animation: name duration timing-function delay iteration-count direction;
这六个属性值分别为：
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
2.animation-name
绑定到选择器的keyframe名称。使用方法：changeTips就是我自定义的名字。也就是animation里面的name的值。
@keyframes changeTips {
0%{
width: 38px;
}
50%{
width: 52px;
}
100%{
width: 66px;
}
}
3. animation-duration，animation-delay
这两个分别表示我们定义的这个关键帧动画的持续时间，以及开始时的延迟时间。都是以秒或者毫秒计时。
4. animation-timing-function
这个也是用于定义函数变化速度曲线的。
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
5. animation-iteration-count，animation-derection
这两个属性分别表示关键帧动画的播放次数和是否应该反向轮流播放动画。
| n | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |
| alternate | 动画应该轮流反向播放。 |
| normal | 默认值。动画应该正常播放。 |
其实该属性我觉得可以这么理解，就是写了一个视频或者一个小片段，就像以前的电影一样。我们写了一张一张的图，然后通过加animation-name，开始流畅起来。然后通过加animation-timing-function给一个“快进”、“0.5倍数播放”等等，然后再给一个animation-count定义这个片段需要播放几次。通过animation-direction定义可不可以倒着播放。
最后附上一个自己的小练习。图片大家自己找一个替代一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
root{
background-image: linear-gradient(rgb(80, 80, 248),#FFF);
position: relative;
}
@keyframes moveBalloon {
0%{
position: absolute;
top: 0;
left: 0;
transform: rotateZ(0deg);
}
25%{
position: absolute;
top: 500px;
left: 50%;
transform: rotateZ(30deg);
}
50%{
position: absolute;
top: 0;
left: 1379px;
transform: rotateZ(0deg);
}
75%{
position: absolute;
top: 500px;
left: 50%;
transform: rotateZ(-30deg);
}
100%{
position: absolute;
top: 0;
left: 0;
transform: rotateZ(0deg);
}
}
.root img{
animation: moveBalloon 6s linear .5s infinite normal;
}
</style>
</head>
<body>
<div class="root">
<img src="./img/balloon.png" alt="">
</div>
</body>
</html>
类似资料：