web-dev-qa-db-fra.com

Animation CSS avec retard et opacité

J'essaie de fondre un élément après 2 secondes en utilisant une animation CSS. Le code fonctionne très bien dans les nouveaux navigateurs, mais dans les anciens navigateurs, l'élément restera caché à cause de "l'opacité: 0".

Je veux qu'il soit visible dans les anciens navigateurs et je ne veux pas invoquer le javascript. Peut-il être résolu en utilisant CSS? Par exemple. certains comment cibler les navigateurs qui ne prennent pas en charge l'animation?

CSS:

#element{
animation:1s ease 2s normal forwards 1 fadein;
-webkit-animation:1s ease 2s normal forwards 1 fadein;
opacity:0
}

@keyframes fadein{from{opacity:0}
to{opacity:1}
}

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

HTML:

<div id=element>som content</div>
cssanimationopacity
17
user1087110

Ne définissez simplement pas le opacity initial sur l'élément lui-même, placez-le dans le @keyframes:

#element{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

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

Cette technique supprime le retard de l'animation, de sorte qu'elle commence à s'exécuter immédiatement. Cependant, l'opacité ne changera pas vraiment avant environ 66% dans l'animation. Étant donné que l'animation dure 3 secondes, elle donne l'effet d'un délai de 2 secondes et d'un fondu enchaîné pendant 1 seconde.

Voir l'exemple de travail ici: https://jsfiddle.net/75mhnaLt/

Vous pouvez également envisager d'utiliser des commentaires conditionnels pour les anciens navigateurs; IE8 et IE9.

Quelque chose comme ce qui suit dans votre [~ # ~] html [~ # ~] :

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->

Vous pourriez alors faire quelque chose comme:

.lt-ie9 #element {
    opacity: 1;
}
40
Michael Giovanni Pumo

Je suggère que vous définissiez le opacity de l'élément à 1 par défaut (pour les navigateurs qui ne prennent pas en charge les animations). Ensuite, démarrez l'animation à 0 s et utilisez les images clés pour retarder l'animation.

#element{
animation:3s ease 0s normal forwards 1 fadein;
-webkit-animation:3s ease 0s normal forwards 1 fadein;
opacity:1
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

http://jsfiddle.net/mg00t86v/2/

2
Raphael Müller

Étant donné que tous les principaux navigateurs supportent les animations CSS à l'exception notable de IE<10 vous pouvez utiliser des commentaires conditionnels dans votre code HTML comme ceci

<!DOCTYPE html>
<!--[if lte IE 9]><html class="lte-ie9"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html><!--<![endif]-->

vous pouvez donc ajouter une règle plus spécifique pour IE<10 en utilisant le .lte-ie9 nom de classe dans un sélecteur spécifique

.lte-ie9 #element {
   opacity: 1;
   filter : alpha(opacity=100);
}

Je ne déplacerais pas à la place le opacity: 0 à l'intérieur de la première image clé comme suggestion principale, car cela limiterait toutes les animations pour avoir un animation-delay égal à 0 (ou sinon vous pourriez voir une sorte de fouc pour l'élément lui-même)

1
fcalderan

vous pouvez essayer cela pourrait vous aider.

HTML 

<div>some text</div>

CSS 

div{
-webkit-animation: fadein 5s linear 1 normal forwards;
 }

@-webkit-keyframes fadein{
from{
   opacity: 0;
}
to{
    opacity: 1;
}
}
0
Parth Akbari