Зупинення анімації CSS3 на останньому кадрі

У мене 4-частина CSS3-анімації, яка грає при натисканні - але остання частина анімації призначена для того, щоб зняти її з екрана.

Однак він завжди повертається до свого початкового стану, як тільки грав. Хто-небудь знає, як я можу зупинити його на останньому кадрі css (100%) , або як позбутися цілого діва, який він перетворив, як тільки він зіграв.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Ви шукаєте:

animation-fill-mode: forwards;

Більше інформації про MDN та список підтримки браузера в canIuse .

Якщо ви хочете додати цю поведінку до animationвизначення властивостей скорочення , порядок під властивостей такий

animation-name- за замовчуванням none

animation-duration- за замовчуванням 0s

animation-timing-function- за замовчуванням ease

animation-delay- за замовчуванням 0s

animation-iteration-count- за замовчуванням 1

animation-direction- за замовчуванням normal

animation-fill-mode- вам потрібно встановити це forwards

animation-play-state- за замовчуванням running

Тому в найпоширенішому випадку результат буде приблизно таким

animation: colorchange 1s ease 0s 1 normal forwards;

Дивіться документацію MDN тут

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Підтримка браузера

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5,0 -моз-)
• Шафарі 4.0 -webkit-
• Opera 15.0 -webkit- (12.112.0 -o-)

Використання: -

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Здається, найкращий спосіб поставити остаточний стан в основній частині css. Як і тут, я поклав ширину 220px, щоб вона нарешті стала 220px. Але починаючи з0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

Це не ваша проблема з тим, що ви встановлюєте webkitAnimationName ні до чого, тому це повертає CSS для вашого об'єкта до стану за замовчуванням. Чи не залишиться він там, де він закінчився, якщо ви просто видалите функцію setTimeout, яка скидає стан?

Я щойно опублікував подібну відповідь, і ви, мабуть, хочете подивитися:

http://www.w3.org/TR/css3-animations/#animation-events-

Ви можете дізнатись аспекти анімації, такі як запуск та зупинка, а потім, як тільки скажіть, що подія "стоп" запустилася, ви можете робити все, що завгодно до дому. Я спробував це деякий час тому, і це може спрацювати, але я б здогадувався, що поки що ви обмежитеся веб-програмою (але ви, мабуть, це вже прийняли). До речі, оскільки я опублікував те саме посилання на 2 відповіді, я б запропонував цю загальну пораду: ознайомтеся з W3C - вони майже пишуть правила та описують стандарти. Крім того, сторінки розробки веб-програм є досить важливими.

Ніхто насправді не приніс цього, а спосіб його роботи - стан анімації-відтворення встановлений на паузу.

Я сьогодні дізнався, що існує обмеження, яке ви хочете використовувати для режиму заливки. Це від Apple Apple Dev. Слух * близько * шість, але не певний. Крім того, ви можете встановити початковий стан свого класу так, як ви хочете, щоб анімація закінчилася, а потім * ініціалізувати * її з / 0%.