Przejście CSS zniknie tylko dla elementu

Question

Czy istnieje sposób na zanikanie w elemencie za pomocą właściwości przejścia CSS? Nigdy wcześniej nie potrzebowałem tego, więc nie przyjrzałem się temu, a teraz nie mogę znaleźć sposobu na zrobienie tego bez uciekania się do JS. Czy można ustawić przejście na natychmiastowy powrót?

Answer 1

To spowoduje pojawianie się/zanikanie na wyjściu myszki/myszy. Możesz ustawić pierwotny krycie na 0 i zastosować to do swojej sytuacji.

.item { 
height:200px; 
width:200px; 
background:red; 
-webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
} 

.item:hover { 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
} 

skrzypce

http://jsfiddle.net/7uR8z/6/

Answer 2

Istnieje kilka sposobów, aby to zrobić, w zależności kiedy chcesz swoją pojawiania się wystąpić:

jsFiddle

/***** Fade in on a page load *****/ 
.fadeInLoad { 
    border: 1px solid #48484A; 
    font-size: 40px; 
    animation: fadeInLoad 5s; 
} 
@keyframes fadeInLoad { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 

/***** Fade in child when parent hovered *****/ 
.fadeIn { 
    border: 1px solid #48484A; 
    font-size: 18px; 
    opacity:0; 
    -webkit-transition : all 2s ease-out; 
    -moz-transition : all 2s ease-out; 
    -o-transition : all 2s ease-out; 
    transition : all 2s ease-out; 
} 
.thisText:hover .fadeIn { 
    opacity: 1; 
} 

Uwaga: aby zaniknąć podczas ładowania strony, potrzebujesz prostej animacji klatki kluczowej, a nie przejścia.