Die CSS-Animationseigenschaft bleibt nach der Animation erhalten

91

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

Ist w3schools veraltet? Es heißt, dass Chrome und FireFox nur Alternativen unterstützen.

— Iambriansreed

5

@iambriansreed: Ich nehme immer an, dass es ist :)

— BoltClock

4

@iambriansreed klicke nicht einmal auf die Suchergebnisse von w3schools. Wenn Sie dies versehentlich tun, schauen Sie von Ihrem Monitor weg und drücken Sie die Zurück-Taste auf Ihrer Maus.

— Doug65536

161

Ich denke, Sie suchen nach animation-fill-modeCSS3-Eigenschaft

https://developer.mozilla.org/en/CSS/animation-fill-mode

Die CSS-Eigenschaft Animationsfüllmodus gibt an, wie eine CSS-Animation vor und nach der Ausführung Stile auf ihr Ziel anwenden soll.

für Ihren Zweck versuchen Sie einfach einzustellen

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Einstellung vorwärts Wert «wird das Ziel der berechneten Werte beibehalten durch den letzten Keyframe während der Ausführung aufgetreten»

— Fabrizio Calderan
quelle

1

Danke Fabrizio, das ist großartig, ich werde diese Antwort akzeptieren. Es passiert nur eine seltsame Sache, von der ich mich frage, ob Sie etwas wissen - unter iOS (ich habe noch nichts getestet) wird der Countdown für das Easy-In angehalten, wenn ich scrolle, z. B. wenn ich beim Laden der Seite sofort mit dem Scrollen beginne es wird nicht eingeblendet. Aber wenn ich aufhöre zu scrollen, zählen die 3s herunter. Ist dies nur das Standardverhalten von iOS? Danke

— SparrwHawk

Was für eine fantastische Lösung.

— Lalnuntluanga Chhakchhuak

16

Neben der Antwort von @Fabrizio Calderan muss gesagt werden, dass Sie die animation-fill-modeImmobilie sogar forwardsdirekt anwenden können animation. Also sollte auch folgendes funktionieren:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

Erweitern Sie das Snippet

— yckart
quelle

0

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.

— Tyau
quelle

0

So animieren Sie ein Element und sorgen dafür, dass es während der Animation erhalten bleibt:

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

Erweitern Sie das Snippet

— codeWithMe
quelle