CSS comment faire un élément fondu, puis fondu?
je peux faire un élément avec une opacité de zéro fondu en changeant sa classe .elementToFadeInAndOut avec le code css suivant:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
y a-t-il un moyen de faire disparaître l'élément après qu'il se soit fondu en éditant css pour cette même classe?
je vous Remercie beaucoup pour votre temps.
3 réponses
utiliser css @keyframes
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
voici une démo
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
@keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}<div class=elementToFadeInAndOut></div>Lecture: utilisant des animations CSS
Vous pouvez nettoyer le code en faisant ceci:
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
@-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
@keyframes fadeinout {
50% { opacity: 1; }
}<div class=elementToFadeInAndOut></div>si vous avez besoin d'un simple fadeIn / Out sans une action explicite de l'utilisateur (comme un mouseover / mouseout) vous pouvez utiliser un CSS3 animation: http://codepen.io/anon/pen/bdEpwW
.elementToFadeInAndOut {
-webkit-animation: fadeinout 4s linear 1 forwards;
animation: fadeinout 4s linear 1 forwards;
}
@-webkit-keyframes fadeinout {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeinout {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
En paramètre animation-fill-mode: forwards l'animation conservera sa dernière image clé
En paramètre animation-iteration-count: 1 l'animation ne s'exécute qu'une seule fois (changez cette valeur si vous devez répéter l'effet plus d'une fois)
essaye ceci:
@keyframes animationName {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes animationName{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}