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

时间:2015-06-15 22:25:23

标签: css css3 css-animations

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

我有一个divdisplay: none;应该在display: block;,并且在3个secondes之后应该是display。很多资源告诉我动画不适用于visibility,但应该使用<script type="text/javascript"> $(document).ready(function(){ $(".js_only").hide(); setTimeout(function () { $(".js_only").show(); }, 3000); }); </script> (我在转换中经常使用)。

知道我有这个糟糕的javascript功能:

display: none;

我在CSS中尝试了一些动画,但没有结果......似乎没有任何效果。

我的页面中没有动画,但只是在动画上遇到@-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; }

13.0.2000.0

重要的是隐藏,这个元素根本不占用空间。 I created a JSFiddle进行相当多的测试。

我的主要关注点是SEO ...我不认为JS选项真的很好,这就是为什么我想要一个纯CSS替代品。也有兴趣测试这些动画,看看这些限制在哪里(我现在看到一个?)。有点喜欢这样的挑战。

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

5 个答案:

答案 0 :(得分:26)

你认为display不可动画是正确的。它不会起作用,你不应该在关键帧动画中加入它。

visibility在技术上是可动画的,但是在一个方向上。您需要根据需要保留属性,然后捕捉到新值。 visibility不会在关键帧之间进行,它只会严厉执行。

&#13;
&#13;
.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;
  }
}
&#13;
<div class="ele"></div>
&#13;
&#13;
&#13;

如果您想淡出,请使用opacity。如果您包含延迟,则您还需要visibility,以阻止用户在元素不可见时与其进行互动。

&#13;
&#13;
.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;
  }
}
&#13;
<div class="ele"></div>
&#13;
&#13;
&#13;

两个示例都使用animation-fill-mode,它可以在动画结束后保存元素的可视状态。

答案 1 :(得分:5)

您可以使用animationdelay道具,只需在延迟后设置visibility:visible,演示:

&#13;
&#13;
@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

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

<div class="delayedShow">
  Hey, I'm here!
</div>
&#13;
&#13;
&#13;

答案 2 :(得分: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; }
}

Fiddle

答案 3 :(得分:2)

你无法为每个属性制作动画,

here's对可动画属性的引用

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

在您的情况下,您还可以为opacityheight设置动画,具体取决于您要渲染的效果类型_

fiddle with opacity animation

答案 4 :(得分:1)

很遗憾,您无法为display属性设置动画。有关动画内容的完整列表,请参阅w3 Schools的CSS animation list

如果你想在页面上保留它的视觉位置,你应该尝试动画它的height(它仍然会影响其他元素的位置),或{{1 (它是多么透明)。您甚至可以尝试动画opacity,即z轴(深度)上的位置,方法是在其顶部放置一个元素,然后重新排列顶部的内容。但是,我建议使用z-index,因为它会保留元素所在的垂直空间。

我已更新fiddle以显示示例。

祝你好运!