CSS ¿cómo hacer que un elemento se desvanezca y luego se desvanezca?
Puedo hacer que un elemento con una opacidad de cero se desvanezca cambiando su clase a .elementToFadeInAndOut con el siguiente css:
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
¿Hay alguna manera de hacer que el elemento se desvanezca después de que se desvanezca editando css para esta misma clase?
Muchas Gracias por su tiempo.
3 answers
Use css @fotogramas clave
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
Aquí hay una DEMO
.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>
Leyendo: Usando animaciones CSS
Puedes limpiar el código haciendo esto:
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-26 09:47:05
Si necesita un solo fadeIn / Out sin una acción explícita del usuario (como un mouseover/mouseout) puede usar 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; }
}
Al establecer animation-fill-mode: forwards
la animación conservará su último fotograma clave
Configurando animation-iteration-count: 1
la animación se ejecutará una sola vez (cambie este valor si necesita repetir el efecto más de una vez)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-08 14:09:13
Prueba esto:
@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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-08 14:32:46