web-dev-qa-db-ja.com

CSSが表示されず、キーフレームが機能しない不透明度アニメーション

display: none;からdisplay: blockにアニメーション化する目的で、不透明度が0から1に変化する非常に基本的なHTMLがあります。

Chromeブラウザーを使用しています。このブラウザーは、-webkitプレフィックスを優先として使用し、-webkit-keyframes遷移セットを使用してアニメーションを可能にしました。 displayをフェードなしで変更するだけです。

JSFiddle here があります。

<html>
    <head>
        <style type="text/css">
            #myDiv
                {
                display: none;
                opacity: 0;
                padding: 5px;
                color: #600;
                background-color: #CEC;
                -webkit-transition: 350ms display-none-transition;
                }

            #parent:hover>#myDiv
                {
                opacity: 1;
                display: block;
                }

            #parent
                {
                background-color: #000;
                color: #FFF;
                width: 500px;
                height: 500px;
                padding: 5px;
                }

            @-webkit-keyframes display-none-transition
                {
                0% {
                    display: none; 
                    opacity: 0;
                    }

                1% 
                    {
                    display: block; 
                    opacity: 0;
                    }

                100% 
                    {
                    display: block; 
                    opacity: 1;
                    }
                }
        </style>
        <body>
            <div id="parent">
                Hover on me...
                <div id="myDiv">
                    Hello!
                </div>
            </div>
        </body>
    </head>
</html>
htmlcss3animation
13
user3476093

@keyframesを使用している場合は、-webkit-animationの代わりに-webkit-transitionを使用する必要があります。 @keyframesアニメーションのドキュメントは次のとおりです。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations 。

以下のコードスニペットを参照してください。

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  display: none;
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
}
.parent:hover .myDiv {
  display: block;
  opacity: 1;
  /* "both" tells the browser to use the above opacity
  at the end of the animation (best practice) */
  -webkit-animation: display-none-transition 1s both;
  animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
@keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

2016年の更新された回答

今日のベストプラクティスを反映するために、アニメーションではなくトランジションを使用します。更新されたコードは次のとおりです。

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.parent:hover .myDiv {
  opacity: 1;
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>
17
Pipo

displayは、CSSトランジションまたはアニメーションでは機能しません。

opacity、visibility、またはz-indexを使用します。それらをすべて組み合わせることができます。

visibility: visibleをdisplay: blockに、visibility: hiddenをdisplay: noneに配置してください。

そして最後に、例えばz-index: -1とz-index: 100を組み合わせます。

よくできました ;）

25
Cezar Luiz

displayプロパティをアニメーション化することはできません。 visibility: hiddenからvisibility: visibleで試すことができます

8
Salmen Bejaoui

単にposition: fixedとドロップz-index: -5の最後に@keyframeアニメーション（負のインデックスを作成できます。..

CSS：

@keyframes fadeOut {
  0% { opacity: 1

  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100%{
    opacity: 0;
    display:none;
    position: fixed;
    z-index: -5;
  }
}
2
Zlerp

JavaScriptを使用して、表示プロパティとアニメーションの両方を変更できます。 @keyframesにディスプレイを配置することはできません。

要素display:noneから始めます。次に、display:blockクラスとanimation:*クラスを同時に追加します。

ここに実例があります アニメーションのイン/アウトあり。

1
sweeds