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

Question

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

Answer 1

Вы ищете:

animation-fill-mode: forwards; 

More info on MDN и браузер списка поддержки на canIuse.

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 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;} 
} 

Answer 6

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

Answer 7

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

Поддержка браузеров

• Хром 43,0 (4,0 -webkit-)
• И.Е. 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; 
    } 
} 

Answer 8

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