Wie behält man Stile nach der Animation bei?

Ich arbeite an einem Portfolio, um zu zeigen, wann ich mich für mein nächstes Studium bewerbe. Seit wir im Jahr 2012 leben, hat es jede Menge ausgefallene Animationen und CSS3-Schrott, nur um ihnen das Gefühl zu geben, dass wir diesen Kerl brauchen. ich habe im Moment ein kleines Problem.

Dies ist ein kleiner Teil eines bestimmten Elements:

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

Bitte beachten Sie, dass ich die Firefox-Keyframes weggelassen habe, da sie ziemlich gleich sind. Richtig, hässlich formatiertes CSS, das Elemente mit der ID ‘einblenden’… einblenden lässt.

Das Problem ist, dass die Elemente nach Beendigung der Animation wieder verschwinden. Dies verwandelt hässlich formatiertes CSS in unbrauchbares CSS.

Hat jemand eine Idee, wie man den geänderten Stil nach der Animation beibehalten kann?

Ich denke, diese Frage wurde schon einmal gestellt und es tut mir ziemlich leid, wenn ja.

Versuche es mit:

#fadein {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

Duopixel-Antwort ist der richtige Weg, aber nicht völlig browserübergreifend, jedoch ermöglicht dieses Jquery-Plugin Animations-Callbacks und Sie können die Elemente in der Callback-Funktion nach Belieben gestalten: https://github.com/krazyjakee/jQuery-Keyframes