Kann ich den Fortschritt einer Keyframe-Animation auf eine bestimmte Stufe einstellen?

Ich habe eine Keyframe-Animation mit mehreren Schritten:Kann ich den Fortschritt einer Keyframe-Animation auf eine bestimmte Stufe einstellen?

@keyframes rotateLeftSideCustom { 
    0% { 
    } 
    40% { 
     -webkit-transform: rotateY(-15deg); 
     transform: rotateY(-15deg); 
     opacity: .8; 
     -webkit-animation-timing-function: ease-out; 
     animation-timing-function: ease-out; 
    } 
    100% { 
     -webkit-transform: scale(0.8) translateZ(-200px); 
     transform: scale(0.8) translateZ(-200px); 
     opacity: 0; 
    } 
} 

.section-animation { 
    -webkit-transform-origin: 100% 50%; 
    transform-origin: 100% 50%; 
    -webkit-animation: rotateLeftSideCustom 0.6s both ease-in; 
    animation: rotateLeftSideCustom 0.6s both ease-in; 
}

Gibt es eine Möglichkeit, JavaScript verwenden kann, um den Fortschritt der Animation zu setzen?

ZB:

document.querySelector('.section-animation').animationState('40%');

Kontext: Ich versuche, eine ziehbar Schnittstelle zu bauen, wo ich den Fortschritt der Animation mit der Menge an Ziehen des Benutzers ausrichten müssen der Fall ist.

Quelle

2015-04-21 nils

Firefox hat eine 'AnimationEvent' sie vorschlägt, die verwendet werden könnten, diese Art der Sache zu verwalten. Es ist noch lange nicht bereit für die Verwendung in einer Produktionsumgebung: https: //developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/AnimationEvent –

Gibt es keine Möglichkeit, 'Transition' zu verwenden? Wenn die Animationen einfache lineare Dinge sind, dann brauchen Sie wahrscheinlich keine Keyframes, es könnte einen Blick wert sein –

Wie würde ich den Zustand eines aktiven Übergangs ändern (sagen wir es auf '60%' Fortschritt)? – nils

Sie könnten jQuery für die Animation verwenden. Mit .animate() haben Sie eine Eigenschaft step.

animate API

Aus der Dokumentation:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>animate demo</title> 
    <style> 
    div { 
    position: relative; 
    background-color: #abc; 
    width: 40px; 
    height: 40px; 
    float: left; 
    margin: 5px; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p><button id="go">Run »</button></p> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 
<div class="block"></div> 

<script> 
$("#go").click(function() { 
    $(".block:first").animate({ 
    left: 100 
    }, { 
    duration: 1000, 
    step: function(now, fx){ 
     $(".block:gt(0)").css("left", now); 
    } 
    }); 
}); 
</script> 

</body> 
</html>

Wo *now* der Ist-Zustand der Animation ist.

UPDATE

Vermutlich können Sie requestAnimationFrame verwenden, aber dies ist auch wie meine andere Lösung. Der Unterschied ist - dass es sich um reines JavaScript handelt, also keine externe Bibliothek benötigt wird.

Quelle

2015-04-21 14:07:40 webprogrammer

Vielen Dank, das ist eine gute Lösung für einfache Animationen. Wenn die Animation mehrere Schritte umfasst, kann es jedoch etwas unordentlich werden. – nils

@nils sehe meine aktualisierte Antwort. – webprogrammer

OP fragt nach Keyframes und wie man sie dynamisch bearbeitet, nicht über alternative Lösungen, wenn es nicht möglich ist, was zu einer externen Bibliothek eine relevante Antwort, dann erklären Sie bitte, wie –

Habe ich es richtig verstanden, dass Sie die Animation nicht bei 0%, sondern bei 40% starten wollen?

Es gibt einen Weg, es CSS-nur zu tun, durch negativen Wert mit für die Animation-Verzögerung

.section-animation { 
    animation-delay: -0.24s; /*40% of 0.6s */ 
}

Zusätzlich sollen Sie

.section-animation { 
    animation-play-state: paused; 
}

zu Ihrem Elemente hinzuzufügen, so dass Sie könnte den Status der Animation als statisches Bild sehen, nicht animiert.

Hier ist ein Link: https://css-tricks.com/starting-css-animations-mid-way/

Quelle

2015-04-21 14:21:25

Ich versuche den Animationsstatus dynamisch zu aktualisieren, nicht nur den Startpunkt, aber vielleicht funktioniert das auch so. – nils

Sie könnten hässliche Berechnungen ausführen, wenn Sie eine Animation mit einer eigenen Verzögerung der Animation haben. Aber selbst dann sollte das nicht allzu komplex sein. –

Beste Antwort hier - alle anderen schlagen nur vor, eine externe Animationsbibliothek zu verwenden, aber wenn ich eine Sache vermeiden möchte, sind es Animationen. Es ist besonders hilfreich, Dinge CSS zu halten, denn dann wissen Sie, dass Ressourcen-limitierte Geräte wie Telefone dafür optimiert werden. Wenn Sie einen CSS-Transpiler verwenden, wie zB less oder sass, können Sie diese Verzögerung ganz einfach mit Variablen verwalten. –

Kann ich den Fortschritt einer Keyframe-Animation auf eine bestimmte Stufe einstellen?

Antwort

Verwandte Themen