Как я могу сделать линию сжаться с правой стороны? ⇐ 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 ... -hand-side