web-dev-qa-db-ja.com

遅延のある純粋なCSSアニメーションの可視性

アニメーションonLoad Javascriptなしを実装しようとしています。 JSは簡単ですが、CSSは...ではありません。

divがあります。これはdisplay: none;上にあり、3秒後にdisplay: block;になるはずです。多くのリソースから、アニメーションはdisplayでは機能せず、visibility（移行時に頻繁に使用される）では機能するはずであることがわかりました。

私はこの恐ろしいjavascript関数を持っていることを知っています：

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>

CSSでアニメーションを試してみましたが、結果はありません...何も機能しないようです。

私のページにはアニメーションがほとんどありませんが、display: none;のアニメーションに苦労しています。

@-moz-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@-webkit-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }
}

.css_only {
    -moz-animation-name: showEffect;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 2.3s;

    -webkit-animation-name: showEffect;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 2.3s;

    animation-name: showEffect;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2.3s;
}

隠されているので重要です。この要素はまったくスペースを取りません。 JSFiddleを作成しました かなりのテストを行いました。

私の主な関心事はSEOです...私はJSオプションが本当にいいとは思わないので、純粋なCSSの代替が欲しいのです。また、それらのアニメーションをテストし、それらの制限がどこにあるかを確認することに興味があります（私は今1つを見ていますか？）。そんなチャレンジを楽しんでいます。

読んでくれてありがとう、誰かが答えを持っていることを願っています。

csscss3css-animations
22
sebastienbarbier

display はアニメーション化できないと考えるのは正しいことです。機能しません。キーフレームアニメーションに含める必要はありません。

visibility は技術的にアニメートできますが、方法についてはラウンドです。必要な期間プロパティを保持し、新しい値にスナップする必要があります。 visibilityはキーフレーム間でトゥイーンせず、ただ激しくステップします。

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
<div class="ele"></div>

フェードしたい場合は、opacityを使用します。遅延を含める場合、visibilityも必要になります。これは、ユーザーが表示されていない間にユーザーが要素と対話するのを停止するためです。

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
<div class="ele"></div>

両方の例で animation-fill-mode 。アニメーションの終了後、要素の視覚状態を保持できます。

32
Oka

animation のdelay propで遊ぶことができます。delay、デモの後にvisibility:visibleを設定するだけです：

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 2.3s forwards delayedShow ;
}
So, Where are you?

<div class="delayedShow">
  Hey, I'm here!
</div>
5
James Yang

animation-delayを使用します。

div {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0;

    animation: fadeIn 3s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

フィドル

5
Leo

すべてのプロパティをアニメーション化することはできませんが、

here's アニメート可能なプロパティへの参照

表示はアニメーション化できますが、表示はアニメーション化できません...

あなたの場合、レンダリングしたいエフェクトの種類に応じて、opacityまたはheightをアニメーション化することもできます_

不透明度アニメーションをいじる

2
maioman

残念ながら、displayプロパティをアニメーション化することはできません。アニメーション化できるものの完全なリストについては、w3 Schoolsの CSSアニメーションリスト を試してください。

ページ上の視覚的な位置を保持したい場合は、height（他の要素の位置に影響を与える）またはopacity（透明度）をアニメーション化してみてください。 z軸（深さ）上の位置であるz-indexをアニメーション化することもできます。そのためには、その上に要素を配置し、上にあるものを再配置します。ただし、要素がある場所の垂直スペースを保持するため、opacityを使用することをお勧めします。

fiddle を更新して例を示しました。

幸運を！

1
Isaac Minogue