Ich versuche, eine CSS-Animationseigenschaft nach Abschluss beizubehalten. Ist dies möglich?
Das versuche ich zu erreichen ...
Das Element sollte ausgeblendet werden, wenn der Benutzer auf der Seite landet. Nach 3 Sekunden (oder was auch immer) sollte es eingeblendet werden und nach Abschluss der Animation dort bleiben.
Hier ist ein Geigenversuch ... http://jsfiddle.net/GZx6F/
Hier ist der Code zur Aufbewahrung ...
<h2>Test</h2>
<style>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
animation: fadeIn 1s ease-in-out 3s;
}
</style>
Ich weiß, wie man das mit jQuery macht .. es wäre so ...
<h2>test</h2>
<script>
$(document).ready(function(){
$('h2').hide().delay(3000).fadeIn(3000)
});
</script>
css
css-animations
SparrwHawk
quelle
quelle
Antworten:
Ich denke, Sie suchen nach
animation-fill-mode
CSS3-Eigenschafthttps://developer.mozilla.org/en/CSS/animation-fill-mode
für Ihren Zweck versuchen Sie einfach einzustellen
Einstellung vorwärts Wert «wird das Ziel der berechneten Werte beibehalten durch den letzten Keyframe während der Ausführung aufgetreten»
quelle
Neben der Antwort von @Fabrizio Calderan muss gesagt werden, dass Sie die
animation-fill-mode
Immobilie sogarforwards
direkt anwenden könnenanimation
. Also sollte auch folgendes funktionieren:quelle
Mir ist etwas Ähnliches passiert. Ich habe Position hinzugefügt: relativ zu dem Element, das animiert wurde und das es für mich behoben hat.
quelle
So animieren Sie ein Element und sorgen dafür, dass es während der Animation erhalten bleibt:
quelle