Остановка анимации CSS3 в последнем кадре

У меня на клике воспроизводится анимация CSS3 из 4 частей, но последняя часть анимации предназначена для того, чтобы убрать ее с экрана.

Тем не менее, он всегда возвращается в исходное состояние после воспроизведения. Кто-нибудь знает, как я могу остановить его на последнем кадре CSS (100%) , или как избавиться от всего div, в котором он находится, после того, как он сыграл.

@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 -moz-)
• Shafari 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 - они в значительной степени пишут правила и описывают стандарты. Кроме того, страницы разработки webkit являются довольно ключевыми.

Никто на самом деле не принес этого, способ, которым это было сделано для работы, является состоянием воспроизведения анимации, установленным в паузу.

Сегодня я узнал, что есть предел, который вы хотите использовать для режима заполнения. Это от разработчика Apple. Слух * около * шести, но не уверен. Кроме того, вы можете установить начальное состояние вашего класса так, чтобы анимация заканчивалась, а затем * инициализировать * с / 0%.