css3 - truncar - ¿Cómo hacer que un elemento aparezca y desaparezca?

truncar texto css

Question

Puedo hacer que un elemento con una opacidad de cero se difunda 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 difumina editando css para esta misma clase?

Muchas gracias por tu tiempo.

Answer 1

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;
}

Answer 2

Si necesita un solo fadeIn / Out sin una acción explícita del usuario (como un mouseover / mouseout) puede usar una animation CSS3: 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 configurar el animation-fill-mode: forwards la animación conservarán su último fotograma clave

Al establecer la animation-iteration-count: 1 la animación se ejecutará solo una vez (cambie este valor si necesita repetir el efecto más de una vez)

Answer 3

Utilice css @keyframes

.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>