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

У меня есть анимация с четырьмя частями 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); }
}

Ответы

Ответ 2

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

Ответ 3

Лучший способ, похоже, поставить конечное состояние в основной части 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;}
}

Ответ 4

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

Ответ 5

-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 -)
  • Шафари 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;
  }
}

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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