Остановка анимации CSS3 в последнем кадре - PullRequest
Новая
       8

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

157 голосов
/ 05 декабря 2010

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

Тем не менее, он всегда возвращается в исходное состояние после воспроизведения. Кто-нибудь знает, как я могу остановить его в последнем кадре 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); }
}

Ответы [ 8 ]

341 голосов
/ 06 декабря 2010

Вы ищете: 

animation-fill-mode: forwards;

Дополнительная информация о MDN и список поддержки браузеров на canIuse .

17 голосов
/ 21 августа 2017

Если вы хотите добавить это поведение к краткому определению свойства 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 - default running

Поэтомув наиболее распространенном случае результат будет примерно таким: 

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

См. документацию MDN здесь

12 голосов
/ 17 октября 2017 
-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 голосов
/ 03 мая 2013

Лучше всего поставить конечное состояние в основной части 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;}
}
3 голосов
/ 07 декабря 2010

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

1 голос
/ 13 декабря 2010

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

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

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

0 голосов
/ 18 октября 2017

Никто на самом деле не принес этого, способ заставить его работать - animation-play-state установлен на паузу.

0 голосов
/ 07 декабря 2010

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

...