Как я могу сделать линию сжиматься в CSS ⇐ CSS

[Anonymous]

У меня есть горизонтальная линия, которую я пытаюсь сжиматься до нуля. Тем не менее, мой код заставляет его сжиматься слева и справа, в направлении центра линии, но вместо этого я хочу, чтобы линия уменьшилась слева направо. Что я делаю не так? CODE-CSS LANG-CSS PrettyPrint-Override ">

Код: Выделить всё

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;}
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ink-in-css