具有延迟的纯CSS动画可见性 [英] Pure CSS animation visibility with delay

问题描述

我正在尝试在没有Javascript的情况下实现onLoad 上的一些动画. JS很简单，CSS却很简单.

I am trying to implement some animation onLoad without Javascript. JS is easy, CSS is ... not.

我有一个div，应该在display: none;上，并且应该在3秒后为display: block;.许多资源告诉我animate不适用于display，但适用于visibility(我在过渡过程中经常使用).

I have a div which should be on display: none; and should be display: block; after 3 secondes. Lots of resources told me animate does not work with display, but should with visibility (which I use often in my transition).

知道我有这个可怕的javascript函数:

Right know I have this terrible javascript function :

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

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

I tried some animation in CSS but no result ... nothing seems to work.

页面上的动画很少，但是在动画上遇到display: none;的问题.

I have few animation in my page, but just struggling with the display: none; on animation.

@-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 进行了相当的测试.

It is important as hidden, this element does not take space at all. I created a JSFiddle to make quite tests.

我主要关心的是SEO ...我认为JS选项确实不是很好，这就是为什么我想要一个纯CSS替代方案的原因.也有兴趣测试这些动画并查看这些限制在哪里(我现在正看到一个吗?). Kinda在这种挑战中很开心.

My main concerne is SEO ... I don't think the JS option is really nice for that which is why I would like a pure CSS alternative. Also interested to test those animations and see where are those limits (Am I seeing one right now ?). Kinda having fun on such challenge.

感谢阅读，希望有人回答.

Thanks for reading, hope someone has an answer.

推荐答案

您认为 display 无法设置动画.它不起作用，您也不必费心将它包括在关键帧动画中.

You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations.

visibility 在技术上是可动画的，但在四处走动.您需要将属性保留尽可能长的时间，然后捕捉到新值. visibility不会在关键帧之间进行补间，而只是步履蹒跚.

visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility doesn't tween between keyframes, it just steps harshly.

.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，以在元素不可见时阻止用户与该元素进行交互.

If you want to fade, you use opacity. If you include a delay, you'll need visibility as well, to stop the user from interacting with the element while it's not visible.

.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 ，可以在动画结束后保留​​元素的视觉状态.

Both examples use animation-fill-mode, which can hold an element's visual state after an animation ends.

这篇关于具有延迟的纯CSS动画可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！