这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战
动画概念
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画。常用来实现复杂的动画效果。
相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的使用
定义动画：使用@keyframes定义动画
语法：
@keyframes 动画名称{
%0{
}
100%{
}
}
动画序列
- 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
- 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式，任意多的次数
- 用百分比来规定动画发生的时间，或用关键词from和to，等同于0%和100%
使用动画
div{
animation-name：动画名称
animation-duration：持续时间
}
动画的属性
| 属性 | 描述 |
|---|---|
| @keyframes | 定义动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 定义@keyframes动画的名称，必填 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认0，必填 |
| animation-timing-function | 规定动画的速度曲线，默认ease |
| animation-delay | 规定动画何时开始，默认0立刻开始 |
| animation-iteration-count | 规定动画的播放次数，默认是1，还有infinite无限循环 |
| animation-direction | 规定动画是否在下一个周期逆向播放，默认是normal，alternate逆向播放 |
| animation-play-state | 规定动画是否在运行或暂停，默认是running还有pause |
| animation-fill-mode | 规定动画结束后状态，保持forwards，回到起始backwards |
动画简写属性
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画开始或结束状态
- 简写属性里不包含animation-play-state
- 暂停动画animation-play-state经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来，animation-direction：alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
动画案例
案例1： 实现波纹效果
<html>
<head>
<title>demo3</title>
<style>
body {
background-color: #333;
}
.map {
position: relative
}
.city {
position: absolute;
top: 300px;
right: 50%
}
.dotted {
width: 8px;
height: 8px;
background-color: #0099ff;
border-radius: 50%;
}
.city div[class^='pulse'] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation-name: pulse;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
案例2： 实现奔跑的大熊
基本思路：如下图所示一张图片上有8个不同状态的大熊，每个大熊的宽度大约是160px，我们定义一个宽为160px的div盒子，然后把这个图片作为盒子的背景图片，然后通过动画控制背景图片的位置，每次向左移动一个大熊的的位置，所以8个大熊（背景图片的总宽度）分为8次移动结束。这里需要制定animation-timing-function的属性为steps(8)，这样连续起来就像大熊在奔跑一样。然后我们再定义一组盒子移动的动画。让盒子从左边移动到右边。多组动画用逗号分隔。
<html>
<head>
<title>demo3</title>
<style>
body {
background-color: #000;
}
.bear {
position: absolute;
width: 160px;
height: 80px;
top: 50%;
transform: translateY(-50%);
background: url(./bear-25676f9.png) no-repeat;
animation: bear 1s steps(8) infinite, move 5s linear infinite;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1280px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 100%
}
}
div:nth-child(2) {
animation-delay: 1s;
animation-duration: 2.5s;
}
div:nth-child(3){
animation-delay: 2s;
animation-duration: 2s;
}
div:nth-child(4){
animation-delay: 3s;
animation-duration: 1s;
}
div:last-child {
animation-delay: 4s;
}
</style>
</head>
<body>
<div class="bear"></div>
<div class="bear"></div>
<div class="bear"></div>
<div class="bear"></div>
<div class="bear"></div>
</body>
</html>
