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

css css-animations

— Дэн
источник

1

Я опубликую свое собственное повторное уведомление: stackoverflow.com/questions/9196694/css3-animation-scale По крайней мере, у меня есть более поучительное название!

— Дан

Возможный дубликат CSS3 Animate: как сделать так, чтобы объект не возвращался в исходное положение после запуска анимации?

— Майкл Маллани

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>

Развернуть фрагмент

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