纯CSS动画可见性，带延迟

我正在尝试在没有Javascript的情况下实现一些动画onLoad。JS很容易，CSS是...不。

我有一个div应该在display: none;上，并且应该在 3 秒后display: block;。很多资源告诉我，animate 不适用于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来进行相当多的测试。

我主要关心的是搜索引擎优化...我不认为JS选项真的很好，这就是为什么我想要一个纯粹的CSS替代品。也有兴趣测试这些动画，看看这些限制在哪里（我现在看到一个吗？在这样的挑战中有点开心。

感谢您的阅读，希望有人有答案。

您认为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 ，它可以在动画结束后保存元素的视觉状态。

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

小提琴

你可以玩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>

遗憾的是，

您无法对 display 属性进行动画处理。有关您可以制作动画的内容的完整列表，请尝试w3 Schools的CSS动画列表。

如果要保留它在页面上的视觉位置，则应尝试对height（这仍会影响其他元素的位置）或opacity（透明度）进行动画处理。您甚至可以尝试对z-index进行动画处理，这是z轴（深度）上的位置，方法是在其顶部放置一个元素，然后重新排列顶部的内容。但是，我建议使用 opacity ，因为它保留了元素所在的垂直空间。

我已经更新了小提琴以显示一个例子。

祝你好运！

您无法为每个属性设置动画，

下面是对哪些是可动画属性的引用

可见性是可动画的，而显示不是...

在您的情况下，您还可以根据要render_的效果类型对opacity或height进行动画

处理

摆弄不透明度动画

相关内容

最新更新

热门标签：