Zatrzymywanie animacji CSS3 na ostatniej klatce


180

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

Hej, Nick, możesz opublikować css i HTML, którego używasz?
Sebastian Patane Masuelli,

Cześć Sebastian, zaktualizowałem moje pytanie za pomocą css i javascript. Jedyny HTML, którego używam, to div z kliknięciem, aby uruchomić funkcję obracania.
user531192,

Odpowiedzi:


375

Szukasz:

animation-fill-mode: forwards;

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


8
Czy wiesz, czy to działa w chromie? Nie mam z tym szczęścia
user531192

4
Zaakceptuj to jako poprawną odpowiedź. Więcej wyjaśnień na ten temat: 4waisenkinder.de/blog/2014/10/13/…
miron

@ user531192 W przypadku przeglądarek Chrome / Webkit musisz użyć -webkit-animation-fill-mode: forwards;
eivindml

Chrome nie potrzebuje już prefiksu -webkit- (przynajmniej od wersji 49)
Capsule

1
Jednym z problemów, jakie miałem z tym, było to, że nie miałem 100% {}ani to {}zestawu, więc nawet przy animation-fill-mode: forwards;mojej animacji nadal mnie rzucił 0%. (Użyłem pętli @for do tworzenia animacji i zapomniałem ręcznie dodać from{}a to{});
Phil Tune

25

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


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

5

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

Myślę, że to świetny, najlepszy sposób na poradzenie sobie z tym problemem.
Drew Baker,

3

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?


1

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.


0

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


-2

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%.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.