Как повторно использовать KeyFrames, чтобы воспроизвести анимацию назад?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как повторно использовать KeyFrames, чтобы воспроизвести анимацию назад?

Сообщение Anonymous »

У меня есть следующий CSS: < /p>

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

    @keyframes expandTop {
from {
height: 0;
}
to {
height: 100px;
}
}
&.expand {
animation: expandTop 0.5s ease-out forwards;
}
@keyframes collapseTop {
from {
height: 100px;
}
to {
height: 0;
}
}
&.collapse {
animation: collapseTop 0.5s ease-out forwards;
}
&.still {
animation: none;
}
}
Это работает, но кажется, что должен быть способ повторно использовать тот же @keyframes . Я попробовал кучу комбинаций обратного и назад и т. Д., но безрезультатно. Анимация запускается путем переключения класса CSS. Я бы хотел что-то в этом направлении, но это работает: < /p>

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

    @keyframes top {
from {
height: 0;
}
to {
height: 100px;
}
}
&.expand {
animation: top 0.5s ease-out forwards;
}
&.collapse {
animation: top 0.5s ease-out reverse backwards;
}
&.still {
animation: none;
}
Я стучал головой по документам, но это не помогает ... Я облажался, потому что я использую классы для запуска?


Подробнее здесь: https://stackoverflow.com/questions/794 ... -backwards
Ответить

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

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

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

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

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