Pytanie w sprawie javascript, css3, css-animations, webkit – Jak mogę uruchomić animacje CSS3 w określonym miejscu?

6

Używam animacji CSS3 i chcę mieć możliwość przejścia do określonego miejsca w animacji. Na przykład, jeśli CSS wygląda tak (i ​​udawać, że użyłem wszystkich poprawnych prefiksów):

<code>@keyframes fade_in_out_anim {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
#fade_in_out {
  animation: fade_in_out_anim 5s;
}
</code>

wtedy chciałbym móc zatrzymać animację i przenieść ją do znaku 50%. Myślę, że idealny JavaScript wyglądałby mniej więcej tak:

<code>var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';

// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';
</code>

Czy ktoś wie, jak to się stało (miejmy nadzieję w Webkit)?

Chcę być w stanie stworzyć suwak lub interakcję dotykową, która pozwoli użytkownikowi szorować animację. Postanowiłem przerwać animację na etapy, dopóki nie dowiem się, jak robić to, czego potrzebuję. Joel A. Shinness
Czy możesz podać więcej informacji na temat swojego celu? Ponieważ jeśli chcesz po prostu rozpocząć animację w półmetku, polecam dwie animacje, jedną zaczynającą się od 50%, a drugą pełną, a następnie wybierz między nimi klasy. OverZealous

Twoja odpowiedź

1   odpowiedź
20

Możemy użyćanimation-delay własność. Zwykle opóźnia animację na jakiś czas, a jeśli ustawiszanimation-delay: 2s;animacja rozpocznie się dwie sekundy po zastosowaniu animacji do elementu. Ale możesz go także użyć, aby zmusić go do rozpoczęcia animacji z określonym przesunięciem czasowym, używając wartości ujemnej:

<code>.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}
</code>

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/

To powinna być wybrana odpowiedź. Jest łatwy do wdrożenia i przejrzysty. Adam

Powiązane pytania