body {
margin: 0;
background: black;
}
.white-line {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 10px;
background-color: red;
transform: translate(-50%, -50%);
animation: expandLine 0.3s ease-in-out forwards 1.2s, moveUp 1.5s ease-in-out forwards 1.41s, contractLine 0.5s ease-in-out forwards 3.3s;
z-index: 1000;
}
@keyframes expandLine {
100% {width: 100%; opacity: 1;}
}
@keyframes moveUp {
100% {top: 0%;}
}
@keyframes contractLine {
100% {width: 0;}
}
<div class="white-line"></div>
它向中心缩小的原因是因为那是线路位置的位置。因此,在缩小宽度时,您需要同时将线路的位置移至右侧,或者
left: 50%
left: 100%
动画中,添加声明
contractLine
。
left: 100%
body {
margin: 0;
background: black;
}
.white-line {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 10px;
background-color: red;
transform: translate(-50%, -50%);
animation: expandLine 0.3s ease-in-out forwards 1.2s, moveUp 1.5s ease-in-out forwards 1.41s, contractLine 0.5s ease-in-out forwards 3.3s;
z-index: 1000;
}
@keyframes expandLine {
100% {width: 100%; opacity: 1;}
}
@keyframes moveUp {
100% {top: 0%; transform: translate(-50%, 0);}
}
@keyframes contractLine {
100% {width: 0; left: 100%;}
}
I还在
<div class="white-line"></div>
动画中添加了
transform: translate(-50%, 0)