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

181

У меня на клике воспроизводится анимация 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); }
}
user531192
источник
Привет, Ник, можешь ли ты опубликовать используемый CSS и HTML?
Себастьян Патане Масуэлли
Привет, Себастьян, я обновил свой вопрос с помощью CSS и JavaScript. Единственный HTML, который я использую, это div с нажатием кнопки мыши, чтобы запустить функцию поворота.
user531192
возможный дубликат анимации Can't stop в конце одного цикла
MPelletier

Ответы:

376

Вы ищете:

animation-fill-mode: forwards;

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

methodofaction
источник
8
Знаете ли вы, что это работает в Chrome? Не повезло
user531192
4
Пожалуйста, примите это как правильный ответ. Подробнее об этом: 4waisenkinder.de/blog/2014/10/13/…
Мирон,
@ user531192 Для браузеров Chrome / Webkit вы должны использовать -webkit-animation-fill-mode: forwards;
eivindml
Chrome больше не нуждается в префиксе -webkit- (по крайней мере, начиная с версии 49)
Capsule
1
Одна проблема , которую я имел с этим у меня не есть 100% {}или to {}сет, так что даже с animation-fill-mode: forwards;моей анимации бы еще бросить меня в 0%. (Я использовал некоторые циклы @for для создания своих анимаций и забыл вручную добавить a from{}и to{});
Фил Тьюн
25

Если вы хотите добавить это поведение в сокращенное 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 здесь

davnicwil
источник
19
-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;
  }
}
Хите саху
источник
5

Лучший способ, кажется, поставить конечное состояние в основной части 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;}
}  
Оптимус Прайм
источник
Это здорово, лучший способ справиться с этой проблемой, я думаю.
Дрю Бейкер
Если вы используете задержку анимации, она начинается с конечного состояния, сбрасывается до 0%, затем анимируется до 100%. Не идеальный и визуально дребезжащий.
Дебора
3

Не ваша проблема, что вы устанавливаете webkitAnimationName обратно в ничто, так что это сбрасывает CSS для вашего объекта обратно в его состояние по умолчанию. Не останется ли он там, где он оказался, если вы просто удалите функцию setTimeout, которая сбрасывает состояние?

jfriend00
источник
1

Я только что опубликовал аналогичный ответ, и вы, вероятно, хотите взглянуть на:

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

Вы можете узнать аспекты анимации, такие как запуск и остановка, а затем, однажды заявив, что произошло событие «остановка», вы можете делать все, что захотите, с домом. Я попробовал это некоторое время назад, и это может сработать, но я предполагаю, что вы пока будете ограничены веб-комплектом (но вы, вероятно, уже приняли это). Кстати, поскольку я разместил одну и ту же ссылку для 2 ответов, я бы предложил общий совет: посмотрите W3C - они в значительной степени пишут правила и описывают стандарты. Кроме того, страницы разработки webkit являются довольно ключевыми.

Джесси
источник
-2

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

iheartflex
источник