Animacje klatki kluczowej CSS3: koniec i pozostanie na ostatniej klatce

Napotkałem pewne trudności, próbując odtworzyć animację klatki kluczowej CSS3 i mieć odpowiedni element przyklejony do ostatniej klatki po zakończeniu animacji. Według mojego zrozumienia, właściwością, którą muszę ustawić, aby to działało, powinien być Tryb animation-fill-mode, który powinien mieć wartość forwards; to nic nie robi.

.animatedSprite { 
    .animation-name: sprite;
    .animation-duration: .5s;
    .animation-iteration-count: 1;
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards;
    //Vendor prefixes... }

To po prostu odtworzy animację raz, a następnie powróci do pierwszej klatki. Znalazłem przykład animacji klatek kluczowych na JSFiddle ( http://jsfiddle.net/simurai/CGmCe / ), a zmiana trybu wypełnienia na forwards i ustawienie liczby iteracji na 1 również nic nie da.

Każda pomoc będzie bardzo mile widziana.
Author: Joshua Jennings, 2013-10-21
Source

3 answers

animation-fill-mode:forwards jest właściwą właściwością do użycia. Is does not seem to work ponieważ tło obrazu sprite ma domyślną background-repeat:repeat, więc Ostatnia Klatka, którą myślisz, że widzisz, jest w rzeczywistości pierwszą klatką powtarzającego się obrazu tła.

Jeśli ustawisz 

background: url("http://files.simurai.com/misc/sprite.png") no-repeat

animation: play .8s steps(10) forwards;

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

I uruchom demo ostateczna klatka jest teraz pusta - więc forwards robi to, co powinno. Drugą częścią rozwiązania jest zmiana końcowych właściwości to i steps CSS na Ustaw tło poprawnie. Więc naprawdę potrzebujemy tła, aby zatrzymać się na -450px i użyć 9 kroków.

-webkit-animation: play .8s steps(9) forwards;

@keyframes play {
    from { background-position: 0; }
    to { background-position: -450px; }
}

Zobacz demo - poprawiłem tylko właściwości Chrome. Również tutaj znajduje się przykładowy obraz na wypadek, gdyby oryginał zniknął.

Macha sprite

.hi {
    width: 50px;
    height: 72px;
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
    
    -webkit-animation: play .8s steps(9) forwards;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(9) forwards;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}
<div class="hi"></div>
 64
Author: andyb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-01 12:23:10

Zmień 'infinite' na ' 1 ' w css, to mi to naprawia

 2
Author: Adam Moseley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-21 21:11:13

Następujący kod sprawi, że przejście pozostanie na ostatniej klatce: 

-webkit-timing-function:ease;
-webkit-iteration-count:1;
 -2
Author: vijay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-01 07:30:00