Frage an css3, javascript, webkit, css-animations – Wie kann ich CSS3-Animationen an einer bestimmten Stelle starten?

6

Ich verwende CSS3-Animationen und möchte in der Lage sein, zu einer bestimmten Stelle in der Animation zu wechseln. Zum Beispiel, wenn das CSS so aussieht (und so tut, als hätte ich alle korrekten Präfixe verwendet):

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

dann möchte ich in der Lage sein, die Animation zu stoppen und sie auf die 50% -Marke zu verschieben. Ich denke, dass das ideale JavaScript ungefähr so ​​aussehen würde:

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

Kennt jemand einen Weg, um dies zu erreichen (hoffentlich in Webkit)?

Können Sie weitere Informationen zu Ihrem Ziel bereitstellen? Denn wenn Sie eine Animation nur zur Hälfte starten möchten, empfehle ich zwei Animationen, von denen eine bei 50% beginnt und die andere den vollen Effekt zeigt. Anschließend können Sie mithilfe von Klassen zwischen ihnen wählen. OverZealous
Ich möchte in der Lage sein, einen Schieberegler oder eine Berührungsinteraktion zu erstellen, mit der der Benutzer entlang einer Animation scrubben kann. Ich habe beschlossen, die Animation in Phasen zu unterteilen, bis ich herausgefunden habe, wie ich das tun kann, was ich brauche. Joel A. Shinness

Deine Antwort

1   die antwort
20

Wir können das benutzenanimation-delay Eigentum. Normalerweise verzögert es die Animation für einige Zeit und wenn Sie dies einstellenanimation-delay: 2s;Die Animation startet zwei Sekunden, nachdem Sie die Animation auf das Element angewendet haben. Sie können ihn aber auch verwenden, um die Wiedergabe einer Animation mit einer bestimmten Zeitverschiebung zu erzwingen, indem Sie einen negativen Wert verwenden:

<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/

Dies sollte die ausgewählte Antwort sein. Die Implementierung ist einfach und klar. Adam

Verwandte Fragen