Как я могу сделать линию сжаться с правой стороны?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как я могу сделать линию сжаться с правой стороны?

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»