<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS loading动画（animation-direction案例）</title>
<style>
body {
margin: 0;
padding: 50px;
}
* {
box-sizing: border-box;
}
.loading {
display: inline-flex; align-items: end;
background-color: #eee;
border: 1px solid #ddd;
padding: 16px;
}
.loading .txt {
font-size: 16px;
width: 30px; height: 30px;
text-align: center; line-height: 30px;
background-color: #ddd;
border-radius: 50%;
}
.loading .txt+div{
margin-left: 8px;
}
.circle {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #7daeff;
animation: ani 6s ease-in infinite alternate;
/*
animation-direction 定义是否轮流反向播放动画
值：
normal 默认值正常播放
reverse 反向播放
alternate 从正常方向开始的轮流反向播放
alternate-reverse 从反方向开始的轮流反向播放
*/
}
@keyframes ani {
0% {
}
5% {
transform: translateY(-30px);
}
10% {
transform: translateY(-30px) translateX(38px);
}
15% {
transform: translateY(-30px) translateX(38px) translateY(38px);
}
20% {
transform: translateY(-30px) translateX(76px) translateY(38px);
}
25% {
transform: translateY(-30px) translateX(76px) ;
}
30% {
transform: translateY(-30px) translateX(114px) ;
}
35% {
transform: translateY(-30px) translateX(114px) translateY(38px);
}
40% {
transform: translateY(-30px) translateX(152px) translateY(38px);
}
45% {
transform: translateY(-30px) translateX(152px);
}
50% {
transform: translateY(-30px) translateX(190px);
}
55% {
transform: translateY(-30px) translateX(190px) translateY(38px);
}
60% {
transform: translateY(-30px) translateX(228px) translateY(38px);
}
67% {
transform: translateY(-30px) translateX(228px);
}
77% {
transform: translateY(-30px) translateX(266px);
}
87% {
transform: translateY(-30px) translateX(266px) translateY(38px);
}
95% {
transform: translateY(-30px) translateX(304px) translateY(38px);
}
100% {
transform: translateY(-30px) translateX(304px);
}
}
</style>
</head>
<body>
<div style="text-align: center">
<div class="loading">
<div class="circle"></div>
<div class="txt">加</div>
<div class="txt">载</div>
<div class="txt">中</div>
<div class="txt">，</div>
<div class="txt">请</div>
<div class="txt">稍</div>
<div class="txt">后</div>
<div class="txt">！</div>
</div>
</div>
<script>
</script>
</body>
</html>
