Поддержание конечного состояния в конце анимации CSS3

я запускаю анимацию на некоторых элементах, которые установлены в opacity: 0; в CSS. Класс анимации применяется onClick, и, используя ключевые кадры, он изменяет непрозрачность от 0 до 1 (между прочим).

к сожалению, когда анимация заканчивается, элементы возвращаются к opacity: 0 (как в Firefox, так и в Chrome). Мое естественное мышление состояло бы в том, что анимированные элементы поддерживают конечное состояние, переопределяя свои первоначальные свойства. Разве это не так? А если нет, то как могу ли я заставить элемент сделать это?

код (префиксные версии не включены):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
3 201
css css3 css-animations

3 ответа:

попробуйте добавить animation-fill-mode: forwards;. Например, вот так:

animation: bubble 1.0s forwards;
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
349

Если вы используете больше атрибутов анимации стенография:

animation: bubble 2s linear 0.5s 1 normal forwards;

для продолжительности 2С, линейной приурочивать-функции, задержки 0.5 с, 1 итерации-отсчета, нормального направления, переднего заполнени-режима

13

ЕСЛИ НЕ ИСПОЛЬЗОВАТЬ КОРОТКУЮ ВЕРСИЮ РУКИ: убедитесь, что animation-fill-mode: forwards и после объявление анимации или она не будет работать...

animation-fill-mode: forwards;
animation: appear 0.5s;
animation-delay: 1s;

vs

animation: appear 0.5s;
animation-fill-mode: forwards;
animation-delay: 1s;
1