HTML:
<div class="container">
<div class="white-line"></div>
</div>
CSS:
.container {
width: 530px;
height: 530px;
background-color: black
.white-line {
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 3px;
background-color: white;
transform: translate(-50%, -50%);
opacity: 0;
animation: expandLine 0.3s ease-in-out forwards 8.2s, moveUp 1.5s ease-in-out forwards 8.41s, contractLine 0.5s ease-in-out forwards 10.3s;
z-index: 1000;
}
/* Expanding Horizontal Line */
@keyframes expandLine {
0% {width: 5px; opacity: 1;}
100% {width: 100%; opacity: 1;}
}
/* Moving Line Up */
@keyframes moveUp {
0% {top: 50%;}
100% {top: 0%;}
}
@keyframes contractLine {
0% {width: 100%;}
100% {width: 0;}
}
,这使得它从左右向右缩小到线的中心。但是,我希望线从左到右缩小。
我做错了什么?
contractLine
left
。
width
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; left: 100%;}
}