CSS, jak sprawić, by element znikał, a następnie znikał?

Question

mogę element z krycie zerowej pojawiania się poprzez zmianę tej klasy .elementToFadeInAndOut z następującym css:

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

Czy istnieje sposób mogę uczynić element zanikają po to zanika w edycji przez css dla tej samej klasy?

Dziękuję bardzo za poświęcony czas.

Answer 1

użyć CSS @keyframes

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


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

o to 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>

Reading: Using CSS animations

można czyścić kod w ten sposób:

.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

Jeśli potrzebujesz pojedynczy fadeIn/Out bez wyraźnego działania użytkownika (jak mouseover/odsunięciu myszy) można użyć 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; } 
} 

Ustawiając animation-fill-mode: forwards animacja zachowa ostatnią klatkę kluczową

Przez ustawienie animation-iteration-count: 1 animacja będzie działał tylko jeden raz (zmienić tę wartość, jeśli trzeba powtórzyć efekt więcej niż raz)

Answer 3

Spróbuj:

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