具有延迟的纯CSS动画可见性

Question

我试图在没有Javascript的情况下在 onLoad上实现一些动画.JS很简单,CSS就是......不行.

我有div这应该是对display: none;,应该是display: block;后3个secondes.很多资源告诉我动画不起作用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替代品.也有兴趣测试这些动画,看看这些限制在哪里(我现在看到一个？).有点喜欢这样的挑战.

感谢阅读,希望有人有答案.

Answer 1

你认为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,它可以在动画结束后保存元素的可视状态.

Answer 2

您可以播放动画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>

Answer 3

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

小提琴