Problèmes liés à l'animation CSS

Question

J'essaie de créer un texte qui s'estomperait au bout de quelques secondes, mais je suis confronté à des problèmes. Le fondu en vue fonctionne correctement, mais le texte disparaît presque immédiatement après son affichage. Deuxièmement, j'ai besoin de cette animation pour travailler de manière différée, mais quand je définis le délai, cela ne semble pas faire de différence. Le retard fonctionnait bien plus tôt.

Pourquoi l'animation disparaît-elle peu de temps après son affichage? Que dois-je faire pour l'afficher correctement? Pourquoi le retard ne fonctionne-t-il pas maintenant? Aidez-moi, s'il vous plaît. La solution doit être simple mais je ne pense probablement pas à la bonne ligne.

Ce qui suit est mon code.

HTML:

<div id="container" class="container"> 
    <span class="fadeText">Sample Text</span> 
</div> 

CSS:

.container{ 
    margin: 5% auto; 
    position: relative; 
    text-align: center; 
} 
.fadeText{ 
    color: #5B83AD; 
    font-weight: bold; 
    font-size: 125%; 
    border-radius: 4px; 
    border: 1px solid #5B83AD; 
    padding: 4px; 
    text-align: center; 
    opacity: 0; 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    animation-delay: 5s; 
    -webkit-animation: fadeIn 5s ease-in; 
    -moz-animation: fadeIn 5s ease-in; 
    animation: fadeIn 5s ease-in; 
} 

/* Animations */ 
@-moz-keyframes fadeIn{ 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

@-webkit-keyframes fadeIn{ 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 

@keyframes fadeIn{ 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
/* End of Animations */ 

Fiddle: http://jsfiddle.net/hg4Xy/

Note: J'ai extrait que la partie pertinente du code et affiché ici.

Answer 1

Définissez animation-fill-mode à forwards. Actuellement, votre animation s'exécute correctement mais elle retourne à son état d'origine (opacity: 0) après l'exécution de la dernière image-clé. Si vous définissez le mode de remplissage sur forwards, le texte conserverait l'opacité définie par la dernière image-clé (opacity: 1). Alternativement, vous pouvez supprimer la propriété opacity: 0 de .fadeText.

-webkit-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards; 
animation-fill-mode: forwards; /* always use standard un-prefixed version as last */ 

Réglez le animation-delay après que la propriété animation dans le CSS. Actuellement, il est défini avant la propriété animation et puisque la propriété short-hand animation ne spécifie aucun délai, elle est écrasée. En variante, modifie la propriété de raccourci comme indiqué ci-dessous.

-webkit-animation: fadeIn 5s ease-in; 
-moz-animation: fadeIn 5s ease-in; 
animation: fadeIn 5s ease-in; 
/* set delay after animation */ 
-webkit-animation-delay: 5s; 
-moz-animation-delay: 5s; 
animation-delay: 5s; 

/* addresses both items. 4th parameter is for delay and 5th is for fill mode */ 
-webkit-animation: fadeIn 5s ease-in 5s forwards; 
-moz-animation: fadeIn 5s ease-in 5s forwards; 
animation: fadeIn 5s ease-in 5s forwards; 

Working Demo