<!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>
body {
background: #f6f6f6;
}
.box {
position: relative;
}
.r1,
.r2,
.r3 {
display: flex;
align-items: center;
margin-top: 10px;
/* 无限循环动画 */
animation-iteration-count: infinite;
/* 进入页面时停顿一秒才开始执行动画（更符合需求） */
animation-delay: 1s;
}
.r1 {
margin-top: 0;
animation-name: r1Fn;
animation-duration: 10s;
position: relative;
}
.r2 {
animation-name: r2Fn;
animation-duration: 10s;
position: relative;
}
.r3 {
animation-name: r3Fn;
animation-duration: 10s;
position: relative;
}
.item {
/* 高度 130 + marginTop: 10 = 140, 后续 如果元素高度修改，可从 百分比 100%往前根据规律修改 */
width: 340px;
height: 130px;
background: #fff;
border-radius: 4px;
text-align: center;
line-height: 130px;
}
.item:not(:first-child) {
margin-left: 10px;
}
/*
帧动画逻辑：
一：
0%起始状态、位置
消失
不变化
在末行显示出来
不变化
上
不变化
不变化
上
100%不变化
二：
0%起始状态、位置
不变化
上
不变化
消失
不变化
在末行显示出来
不变化
上
不变化
三：
0%起始状态、位置
不变化
上
不变化
不变化
上
不变化
消失
不变化
在末行显示出来
三行各自共9帧动画，每帧间隔：100 / 9 = 10%。
*/
@keyframes r1Fn {
0% {
opacity: 1;
top: 0px;
}
11.11% {
opacity: 0;
top: 0px;
}
22.22% {
opacity: 0;
top: 0px;
}
/* 在隐藏的状态下位移到下一次出现的位置的下方80px,以制造上移显示效果(如果要消除位移效果，就设为出现的坐标点) */
22.23% {
opacity: 0;
top: 360px;
}
33.33% {
opacity: 1;
top: 280px;
}
44.44% {
opacity: 1;
top: 280px;
}
55.55% {
opacity: 1;
top: 140px;
}
66.66% {
opacity: 1;
top: 140px;
}
77.77% {
opacity: 1;
top: 140px;
}
88.88% {
opacity: 1;
top: 0px;
}
100% {
opacity: 1;
top: 0px;
}
}
@keyframes r2Fn {
0% {
opacity: 1;
top: 0px;
}
11.11% {
opacity: 1;
top: 0px;
}
22.22% {
opacity: 1;
top: -140px;
}
33.33% {
opacity: 1;
top: -140px;
}
44.44% {
opacity: 0;
top: -140px;
}
55.55% {
opacity: 0;
top: -140px;
}
55.56% {
opacity: 0;
/* 在隐藏的状态下位移到下一次出现的位置的下方80px,以制造上移显示效果(如果要消除位移效果，就设为出现的坐标点) */
top: 220px;
}
66.66% {
opacity: 1;
top: 140px;
}
77.77% {
opacity: 1;
top: 140px;
}
88.88% {
opacity: 1;
top: 0px;
}
100% {
opacity: 1;
top: 0px;
}
}
@keyframes r3Fn {
0% {
opacity: 1;
top: 0px;
}
11.11% {
opacity: 1;
top: 0px;
}
22.22% {
opacity: 1;
top: -140px;
}
33.33% {
opacity: 1;
top: -140px;
}
44.44% {
opacity: 1;
top: -140px;
}
55.55% {
opacity: 1;
top: -280px;
}
66.66% {
opacity: 1;
top: -280px;
}
77.77% {
opacity: 0;
top: -280px;
}
88.88% {
opacity: 0;
top: -280px;
}
88.89% {
opacity: 0;
/* 在隐藏的状态下位移到下一次出现的位置的下方80px,以制造上移显示效果(如果要消除位移效果，就设为出现的坐标点) */
top: 80px;
}
100% {
opacity: 1;
top: 0px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="r1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="r2">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="r3">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
</html>
