Поддержание конечного состояния в конце анимации 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; }
}

Ответ 1

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

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

Ответ 2

Если вы используете больше атрибутов анимации, сокращенное обозначение:

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

для продолжительности 2 с, линейная синхронизация, задержка 0,5 с, 1 итерация, нормальное направление, режим прямого заполнения

Ответ 3

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

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

против

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Ответ 4

использование animation-fill-mode: вперед;

animation-fill-mode: forwards;

Элемент сохранит значения стиля, установленные последним ключевым кадром (зависит от анимации-направления и анимации-итерации-счетчика).

Примечание. Правило @keyframes не поддерживается в Internet Explorer 9 и более ранних версиях.

Рабочий пример

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>