CSS come far sbiadire un elemento e poi scomparire?

Question

posso fare un elemento con un'opacità di dissolvenza zero cambiando categoria per .elementToFadeInAndOut con il seguente CSS:

.elementToFadeInAndOut { 
    opacity: 1; 
    transition: opacity 2s linear; 
} 

C'è un modo per rendere l'elemento di fade out dopo che sfuma in per l'editing css per questa stessa classe?

Grazie mille per il vostro tempo.

Answer 1

usare i CSS @keyframes

.elementToFadeInAndOut { 
    opacity: 1; 
    animation: fade 2s linear; 
} 


@keyframes fade { 
    0%,100% { opacity: 0 } 
    50% { opacity: 1 } 
} 

ecco un 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>

lettura: Using CSS animations

È possibile pulire il codice in questo modo:

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

Answer 2

se avete bisogno di un singolo fadeIn/Out senza un'azione esplicita dell'utente (come un passaggio del mouse/mouseout) è possibile utilizzare 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; } 
} 

Impostando animation-fill-mode: forwards l'animazione manterrà il suo ultimo fotogramma chiave

Impostando animation-iteration-count: 1 l'animazione verrà eseguito solo una volta (cambiare questo valore se è necessario ripetere l'effetto più di una volta)

Answer 3

Prova questo:

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