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

302

Я запускаю анимацию для некоторых элементов, которые установлены 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
Я опубликую свое собственное повторное уведомление: stackoverflow.com/questions/9196694/css3-animation-scale По крайней мере, у меня есть более поучительное название!
Дан

Ответы:

531

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

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
Кристофер Виландер
источник
1
Да это все. Проверю ваш ответ, когда смогу. Если кто-то из CSS-менеджеров хочет прокомментировать логику, стоящую за этим, я хотел бы знать!
Дан
8
Вы можете прочитать о свойстве animation-fill-mode здесь - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Надеюсь, что это поможет!
Кристофер Виландер
6
@Dan forwardsзначение animation-fill-modeсвойства гарантирует, что элемент будет содержать последнее состояние ключевого кадра анимации после ее завершения. например, если ваша анимация изменяется widthот 0 до 100px, это свойство обеспечивает ширину 100px после окончания анимации.
Farzad YZ
5
не забудьте указать 100% / toточку, @keyframeиначе она не будет работать.
Томаш Муларчик
анимация-заполнение-режим: форварды сделали свое дело и для меня, но только после добавления обязательного правила! Важно
Шаюна
26

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

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

Это дает:

  • 2s продолжительность
  • linear временная функция
  • 0.5s задержка
  • 1 счетчик итераций (может быть бесконечным)
  • normal направление
  • forwards Режим заполнения (устанавливается в обратном направлении, если вы хотите, чтобы совместимость использовала конечную позицию в качестве конечного состояния)
agiopnl
источник
14

ЕСЛИ НЕ ИСПОЛЬЗУЯ КОРОТКИЙ HAND VERSION: Убедитесь , что 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;
Тейлор А. Лич
источник
1
Ты прав. Обновил мой ответ. Спасибо, это ускользнуло от меня, ха-ха.
Тейлор А. Лич
4

Используйте animation-fill-mode: forwards;

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>

Дипу Регунат
источник