实例1
- 使用动画延迟,形成错落的波浪效果
<div class="animation1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.animation1 {
width: 90px;
height: 20px;
position: relative;
}
.animation1 div {
width: 10px;
height: 20px;
background: #bea9d9;
position: absolute;
top: 50%;
transform: translateY(-50%);
animation: loading1 1.5s ease-in-out infinite;
}
.animation1 div:nth-child(1) {
left: 0;
animation-delay: 0.25s;
}
.animation1 div:nth-child(2) {
left: 20px;
animation-delay: 0.5s;
}
.animation1 div:nth-child(3) {
left: 40px;
animation-delay: 0.75s;
}
.animation1 div:nth-child(4) {
left: 60px;
animation-delay: 1s;
}
.animation1 div:nth-child(5) {
left: 80px;
animation-delay: 1.25s;
}
@keyframes loading1 {
50% {
height: 100px;
background: #4ee9d3;
}
}
实例2
- 动画反向播放
<div class="animation2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.animation2 {
width: 90px;
height: 90px;
}
.animation2 div {
width: 40px;
height: 40px;
background: #bea9d9;
float: left;
margin-right: 10px;
margin-bottom: 10px;
animation: loading2 1.5s ease-in-out infinite alternate;
}
.animation2 div:nth-child(2n) {
margin-right: 0;
}
@keyframes loading2 {
100% {
background: #4ee9d3;
transform: rotate(360deg);
border-radius: 50%;
}
}
实例3
- 动画元素设置不同的速率
<div class="animation3">
<div></div>
<div></div>
<div></div>
</div>
.animation3 {
width: 100px;
height: 100px;
position: relative;
}
.animation3 div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: loading3 linear infinite;
}
.animation3 div:nth-child(1) {
width: 40px;
height: 40px;
border: 4px solid #4ee9d3;
border-bottom: 4px solid transparent;
border-radius: 50%;
animation-duration: 0.6s;
}
.animation3 div:nth-child(2) {
width: 60px;
height: 60px;
border: 4px solid #bea9d9;
border-top: 4px solid transparent;
border-radius: 50%;
animation-duration: 0.8s;
}
.animation3 div:nth-child(3) {
width: 80px;
height: 80px;
border: 4px solid #4ee9d3;
border-bottom: 4px solid transparent;
border-radius: 50%;
animation-duration: 1s;
}
@keyframes loading3 {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}