要素のCSSトランジションがフェードインする

Question

CSSトランジションプロパティを使用してエレメントをフェードインする方法はありますか？これまで見たことがないようにする必要は本当にありませんでしたが、今はJSに頼らずにその方法を見つけることができません。即時復帰状態に移行することは可能ですか？

Answer 1

これは、マウスイン/マウスアウトでフェードイン/フェードアウトします。元の不透明度を0に設定し、これを状況に適用することができます。

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

フィドル

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

Answer 2

これを行うにはカップルの方法は、あなたがあなたのフェードをしたいときに応じて、中が発生します

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

注：ページの読み込みをフェードインするには、トランジションではなく、単純なキーフレームアニメーションが必要です。