Zatrzymywanie animacji CSS3 na ostatniej klatce

Mam 4-częściową animację CSS3 odtwarzaną po kliknięciu - ale ostatnia część animacji ma na celu zdjęcie jej z ekranu.

Jednak po odtworzeniu zawsze wraca do pierwotnego stanu. Każdy wie, jak mogę go zatrzymać na ostatniej ramce css (100%) , a także, jak pozbyć się całego diva, w którym on gra, gdy gra.

@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); }
}

Szukasz:

animation-fill-mode: forwards;

Więcej informacji o MDN i liście obsługiwanych przeglądarek w canIuse .

Jeśli chcesz dodać to zachowanie do animationdefinicji właściwości skróconej , kolejność właściwości podrzędnych jest następująca

animation-name- domyślnie none

animation-duration- domyślnie 0s

animation-timing-function- domyślnie ease

animation-delay- domyślnie 0s

animation-iteration-count- domyślnie 1

animation-direction- domyślnie normal

animation-fill-mode- musisz to ustawić forwards

animation-play-state- domyślnie running

Dlatego w najczęstszym przypadku wynik będzie taki:

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

Zobacz dokumentację MDN tutaj

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

Obsługa przeglądarki

• 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-)

Stosowanie:-

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

Najlepszym sposobem wydaje się umieszczenie stanu końcowego w głównej części css. Tak jak tutaj, ustawiłem szerokość 220px, aby w końcu stała się 220px. Ale zaczyna się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;}
}  

Problem nie polega na tym, że ustawiasz webkitAnimationName z powrotem na zero, więc to resetuje CSS twojego obiektu z powrotem do stanu domyślnego. Czy nie pozostanie tam, gdzie się skończyło, jeśli po prostu usuniesz funkcję setTimeout, która resetuje stan?

Właśnie opublikowałem podobną odpowiedź i prawdopodobnie chcesz rzucić okiem na:

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

Możesz dowiedzieć się o aspektach animacji, takich jak uruchamianie i zatrzymywanie, a następnie, gdy powiesz, że wydarzenie „stop” zostało uruchomione, możesz zrobić wszystko, co chcesz w domenie. Wypróbowałem to jakiś czas temu i może działać, ale domyślam się, że na razie będziesz ograniczony do webkita (ale prawdopodobnie już to zaakceptowałeś). Przy okazji, ponieważ zamieściłem ten sam link dla 2 odpowiedzi, oferuję tę ogólną radę: sprawdź W3C - w zasadzie piszą zasady i opisują standardy. Również strony programistyczne dla webkitów są dość kluczowe.

Nikt go tak naprawdę nie przyniósł, więc sposób, w jaki został stworzony, jest ustawiony na wstrzymanie animacji .

Dowiedziałem się dzisiaj, że istnieje limit, którego chcesz użyć w trybie wypełniania. To jest od twórcy Apple. Plotka jest * około * szósta, ale nie jest pewna. Alternatywnie możesz ustawić początkowy stan swojej klasy na sposób zakończenia animacji, a następnie * zainicjować * ją z / 0%.