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

[Anonymous]

У меня есть простая белая горизонтальная линия. В настоящее время у меня есть этот CSS, чтобы анимировать его, чтобы сократить его в ничего: < /p>
HTML:





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;}
}
< /code>
Тем не менее, это заставляет его сжиматься слева и справа, в сторону центра линии. Но я хочу, чтобы линия уменьшилась слева направо.
Что я делаю неправильно?

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