CSS要素の効果をフェードインする方法は？

Question

ここは私のCSSです。最初の質問ですが、私はdivが瞬時にではなくフェードインとフェードアウトするときに発生するエフェクトを欲しがります。私はトランジションを使用しようとしましたが、要素のデザインが混乱しているようですので、私は立ち往生しています。

私の2番目の質問は、（参考のためにここにある：https://jsfiddle.net/ojvym9cm/2/）、 'do'キーアニメーションが発生した後にホバー効果を発生させることは可能ですか？私はdivがアニメーション化している間、ホバー効果を起こさせたくありません。

私の第三の質問は、なぜアニメーションは、私は「半分」のdivをクリックしただけの直後に起こって代わりにされていますか？ （参考のために）。申し訳ありませんが、これは私がちょうどこの時間を無駄にしないように何時間も過ごしたことがたくさんあります。要素ルールともホバールールの両方でtransition: opacity 300ms;：あなたが必要となります。これを行うにFirst question, I want the effects that occur when the div is hovered above to fade in and out, rather than it being instant. I tried to use transitions, but it seems to mess with the design of the element, so I'm stuck.

：この質問に答えるために

#middle { 
    width: 100px; 
    height: 100px; 
    top: 0; 
    left: 50%; 
    display: block; 
    position: fixed; 
    border-radius: 150px; 
    background: powderblue; 
    animation: do 4s 1 ease; 
    -webkit-animation-fill-mode: forwards; 
} 

#middle:hover { 
    width: 96px; 
    height: 48px; 
    left: 50%; 
    top: 30%; 
    position: fixed; 
    border-color: powderblue; 
    border-style: solid; 
    border-width: 2px 2px 50px 2px; 
    border-radius: 100%; 
    z-index: 1000; 
    background: white; 
} 

#middle:hover:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    background: white; 
    border: 18px solid powderblue; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
} 

#middle:hover:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: powderblue; 
    border: 18px solid white; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
} 

Answer 1

。

私は今あなたの他の質問を見て、その間に答えを更新します。

Answer 2

CSSを使ってアニメーションを作成できますが、それを望むようにトリガするには、jQueryが必要です。ここで

は一例です：https://jsfiddle.net/557g66ry/

そして、いくつかのexplainations： 私は2つのパラメータに影響するアニメーションslideDownを設定します（あなたがやったのと同じ）

• 項目のトップの位置

• アイテムの不透明度を[あなたの質問に答える1] を（フェードアニメーションを持っている）

  @keyframes slideDown { から{ 不透明度：0; トップ：0; } 〜{ 不透明度：1; トップ：30％; }}

AND（.downクラスなし）#middleアイテムの初期状態のために、私が持っていた：

opacity: 0; 

デフォルトで、アイテムが表示されていないことを確認してください。

私は敬遠しがち#middle項目がクラス.downを持っている場合にのみ、アニメーションを有効にすることを決めました。私は（jQueryのを使用して）#half項目をクリックしたとき、私はそれをトリガーすることができます[それはあなたの質問2の答え] ：

#middle.down { 
    animation: slideDown 4s 1 ease; 
-webkit-animation-fill-mode: forwards; 
} 

最後に、私は後にホバー効果を遅らせるために、同じトリックを使用アニメーションの終わり。

アニメーションの長さ（4s）を知っているので、#middleアイテムのクラスが.arrivedの場合にのみ、ホバーのCSSを有効にします。 JavaScriptのsetTimeout関数（とjQuery）の助けを借りて、その後

私は[それがあなたの質問3の答え] 4S（4000 = milisecondes）後のアイテムに.arrivedクラスを追加：質問へ

setTimeout(function() { 
     $('#middle').addClass('arrived'); 
}, 
4000);