Підтримання кінцевого стану в кінці анімації CSS3

301

Я запускаю анімацію про деякі елементи, встановлені 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: Як, щоб об’єкт не повернувся до початкового положення після запуску анімації?

— Майкл Муллані

528

Спробуйте додати animation-fill-mode: forwards;. Наприклад так:

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

— Крістофер Віландер
джерело

1

Так, це все. Перевіряю вашу відповідь, коли зможу. Якщо хто-небудь із керівників CSS хоче прокоментувати логіку, що стоїть за цим необхідним, я хотів би знати!

— День

8

Про властивість анімаційного заповнення ви можете прочитати тут - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Сподіваюся, що це допомагає!

— Крістофер Віландер

6

@Дане forwardsзначення animation-fill-modeвластивості гарантує, що елемент буде утримувати останній стан анімації ключових кадрів після закінчення анімації. наприклад, якщо ваша анімація змінюється widthвід 0 до 100 пікселів, ця властивість гарантує, що після закінчення анімації елемент залишається шириною 100 пікселів.

— Farzad YZ

5

не забудьте вказати 100% / toпункт, @keyframeінакше це не буде працювати.

— Томаш Муларчик

анімація-режим заповнення: форварди теж зробили трюк для мене, але лише після додавання імперативу "! важливий" до правила

— shayuna

26

Якщо ви використовуєте більше атрибутів анімації, стенограма:

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

Це дає:

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

— агіопнл
джерело

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;

Елемент збереже значення стилів, встановлені останнім ключовим кадром (залежить від анімації-напрямку та анімації-ітерації-кількості).

Примітка: Правило @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>

Розгорніть фрагмент

— Deepu Reghunath
джерело