Сохранение конечного состояния в конце анимации CSS3

я запускаю анимацию на некоторых элементах, которые установлены в opacity: 0; в CSS. Класс анимации применяется onClick, и, используя ключевые кадры, он изменяет непрозрачность с 0 to 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; }
}
201
css css-animations css3

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;

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

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