加载Css3过渡动画?

是否有可能使用CSS3过渡动画页面加载而不使用Javascript?

这是我想要的，但在页面加载:

image-slider.html

到目前为止我发现了什么

CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。

当前回答

只需要很少的Javascript:

window.onload = function() {
    document.body.className += " loaded";
}

现在来看CSS:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

我知道这个问题说的是“不使用Javascript”，但我认为值得指出的是，有一个简单的解决方案，只需要一行Javascript。

它甚至可以是内联Javascript，就像这样:

<body onload="document.body.className += ' loaded';" class="fadein">

这就是所有需要的JavaScript。

2013-07-07 00:49:41

其他回答

我想我已经找到了一种解决OP问题的方法，而不是一开始就过渡。load'的页面-我发现使用一个动画的不透明度淡入有同样的效果，(我正在寻找与OP相同的东西)。

所以我想让正文从白色(与网站背景相同)渐隐到页面加载的黑色文本颜色-我只从周一开始编码，所以我正在寻找一个'上。load'风格的东西代码，但不知道JS -所以这是我的代码，为我工作得很好。

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

不管出于什么原因，这只对.class的#id不起作用(至少对我的不起作用)

希望这有助于-我知道这个网站帮助我很多!

2016-02-19 14:17:35

不一定，因为CSS是尽快应用的，但元素可能还没有绘制。你可以猜测延迟1或2秒，但这对大多数人来说并不合适，这取决于他们的互联网速度。

此外，如果你想淡入一些东西，例如，它将需要CSS隐藏要交付的内容。如果用户没有CSS3转换，那么他们将永远不会看到它。

我推荐使用jQuery(为了方便使用+你可能希望为其他无人机添加动画)和一些像这样的JS:

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

随着在CSS中添加的过渡。这样做的好处是，如果需要的话，可以很容易地允许在传统浏览器中使用animate而不是第二个CSS。

2011-07-24 07:38:39

将此添加到您的CSS淡入动画

body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
}

如果你想让它加载得更慢，就增加放松时间

2021-05-28 09:19:46

CSS只有延迟3s

这里有几点需要注意:

一次调用多个动画我们创建一个等待动画，它只是延迟实际的动画(在我们的例子中是第二个动画)。

代码:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

2019-10-24 16:06:13

这是一个棘手的问题。

答案是“不太可能”。

CSS不是一个功能层。它不知道发生了什么，什么时候发生。它只是用来为不同的“标志”(类、id、状态)添加一个表示层。

默认情况下，CSS/DOM不提供任何类型的“on load”状态供CSS使用。如果你想要/能够使用JavaScript，你会分配一个类到body或其他东西来激活一些CSS。

话虽如此，你可以为此创建一个黑客。我在这里举个例子，但它可能适用于你的情况，也可能不适用。

我们假设“接近”就是“足够好”:

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

下面是我们的CSS样式表的摘录:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

我们还假设现代浏览器是渐进呈现的，所以我们的最后一个元素是最后呈现的，所以这个CSS是最后激活的。

2011-07-24 07:25:26

加载Css3过渡动画?

推荐文章

最新文章

标签