【问题标题】：css3 transition animation on load?加载时的css3过渡动画？
【发布时间】：2011-10-11 22:32:46
【问题描述】：

是否可以在不使用 Javascript 的情况下在页面加载时使用 CSS3 过渡动画？

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

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

CSS3 transition-delay，一种延迟元素效果的方法。仅适用于悬停。
CSS3 Keyframe，在负载下工作，但速度极慢。因此没用。
CSS3 transition 速度足够快，但在页面加载时没有动画。

【问题讨论】：

@blesh：几乎任何东西 - 参见，例如，mysociety.org/2011/08/11/mobile-operators-breaking-content 和 robertnyman.com/2006/04/25/…
关键帧将完成此操作，并在不支持 CSS3 动画时提供最佳回退。为什么你认为它们太慢了？
嗨！链接现在已损坏，我不知道它应该去哪里，所以请有人修复它！

标签： css webkit css-transitions css-animations

【解决方案1】：

更简单的解决方案（仍然使用 [one line inline] javascript）：

使用它作为正文标签：请注意，body. 或 this. 对我不起作用。只有长; querySelector 允许使用 classList.remove (Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

并将这一行添加到您的其他 css 规则之上。

body.onload *{ transform: none !important; }

请注意，这可以适用于不透明度（根据 OP [其他海报] 的要求），只需使用不透明度作为过渡触发器即可。（甚至可以以相同的方式处理任何其他 css 规则，您可以使用多个类来显式延迟触发）

逻辑是一样的。不强制转换（在body.onload 的所有子元素上使用:none !important，并且一旦加载了文档，请删除该类以触发css 中指定的所有元素上的所有转换。

下面的第一个答案（请参阅上面的编辑以获得更短的答案）

这是一个反向的解决方案：

制作您的 html 布局并根据您的最终结果设置 css（包含您想要的所有转换）。
根据自己的喜好设置过渡属性
向要在加载后转换的元素添加一个类（例如：waitload）。 CSS 关键字 !important 是这里的关键字。
加载文档后，使用 JS 从元素中移除类以开始转换（并移除转换：无覆盖）。

适用于多个元素的多个过渡。没有尝试跨浏览器兼容性。

div {
  width: fit-content;
}

#rotated {
  transform: rotate(-50deg)/* any other transformation */
  ;
  transition: 6s;
}

#translated {
  transform: translate(90px)/* any other transformation */
  ;
  transition: 6s;
}

.waitload {
  transform: none !important;
}

<div id='rotated' class='waitload'>
  rotate after load
</div>
<div id='translated' class='waitload'>
  trasnlate after load
</div>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', init);

  function init() {
    [...document.querySelectorAll('.waitload')]
    .map(e => e.classList.remove('waitload'));
  }
</script>

【讨论】：

【解决方案2】：

将此添加到您的 css 以淡入动画

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

如果您希望加载速度较慢，请增加缓出时间

【讨论】：

【解决方案3】：

您也可以使用自定义 css 类 (className) 代替 css 标签。无需外部包。

import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'

const Hello = (props) => {
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        // For load
        setTimeout(function () {
            setLoaded(true);
        }, 50); // Browser needs some time to change to unload state/style

        // For unload
        return () => {
            setLoaded(false);
        };
    }, [props.someTrigger]); // Set your trigger

    return (
        <div
            css={[
                css`
                    opacity: 0;
                    transition: opacity 0s;
                `,
                loaded &&
                    css`
                        transition: opacity 2s;
                        opacity: 1;
                    `,
            ]}
        >
            hello
        </div>
    );
};

【讨论】：

【解决方案4】：

CSS 仅延迟 3 秒

这里要注意几点：

一次调用多个动画
我们创建了一个 wait 动画，它只是延迟实际的动画（在我们的例子中是第二个）。

代码：

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

【讨论】：

【解决方案5】：

如果其他人同时进行两个转换时遇到问题，这就是我所做的。我需要在页面加载时从上到下显示文本。

HTML

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

不知道为什么我一直尝试在 1 个选择器中使用 2 个转换声明，并且（不是真的）认为它会同时使用两者。

【讨论】：

【解决方案6】：

只需要很少的 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。

【讨论】：

小修复：
如果不需要等待页面 onLoad 事件，在标签前插入这段代码：
为了避免覆盖现有的body 类，请使用：document.body.classList.add('loaded)
我发现document.body.className += " loaded"; 对于将loaded 类添加到现有类来说稍微不那么冗长。
@PimSchaaf 感谢您的建议，这完全有道理。我现在编辑它。现在你也可以使用更优雅（但兼容性较差）的 classList。

【解决方案7】：

用body的hover启动它会在鼠标第一次在屏幕上移动时启动，大部分是在到达后的一秒内，这里的问题是它在离开屏幕时会反转。

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

这是我能想到的最好的事情：http://jsfiddle.net/faVLX/

全屏：http://jsfiddle.net/faVLX/embedded/result/

编辑见下面的 cmets：
这在任何触摸屏设备上都不起作用，因为没有悬停功能，因此除非点击它，否则用户不会看到内容。 – 丰富的布拉德肖

【讨论】：

是的，我自己想通了。如果没有其他方法，这是一个好的解决方法。一票赞成。
这是一个糟糕的主意——在任何触摸屏设备上都没有悬停功能，因此除非点击它，否则用户将看不到内容。

【解决方案8】：

嗯，这是一个棘手的问题。

答案是“不是真的”。

CSS 不是功能层。它不知道发生了什么或何时发生。它仅用于将 presentational 层添加到不同的“标志”（类、ID、状态）。

默认情况下，CSS/DOM 不提供任何类型的“加载”状态供 CSS 使用。如果您想要/能够使用 JavaScript，您可以为 body 分配一个类或激活一些 CSS 的东西。

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

我们的操作是假设“接近”是“足够好”：

<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 将最后激活。

【讨论】：

【解决方案9】：

您可以在页面加载时运行 CSS 动画，而无需使用任何 JavaScript；您只需要使用 CSS3 关键帧。

让我们看一个例子...

这是一个仅使用 CSS3 滑动到位的导航菜单演示：

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

分解...

这里的重要部分是关键帧动画，我们称之为slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

...这基本上是说“在开始时，标题将离开屏幕的左侧边缘的整个宽度，并且在结束时将就位”。

第二部分是调用slideInFromLeft动画：

animation: 1s ease-out 0s 1 slideInFromLeft;

以上是简写版本，但为了清楚起见，这里是详细版本：

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

你可以做各种有趣的事情，比如滑动内容，或者吸引注意力到区域。

Here's what W3C has to say.

【讨论】：

是什么让它在页面加载时运行，而不是更早？
只是为了回答上面的问题，它默认显示动画在应用后0s开始，没有延迟。还有一个额外的属性，animation-delay，可以设置来控制它。见：w3.org/TR/css3-animations/#animation-delay-property
为确保动画在文档加载后开始播放，请将动画代码放在正文元素下方的样式表中或正文元素底部的样式标记中。
优秀的答案，在2019年帮助了我！
它不是“onload”，但您可以通过向关键帧添加一个步骤并增加动画时间来延迟开始：@keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 50% { 变换：translateX(-100%); } 100% { 变换：translateX(0); } } header { /* 这部分调用我们上面定义的 slideInFromLeft 动画 */ animation: 10s ease-out 0s 1 slideInFromLeft;背景：#333；内边距：30px； }

【解决方案10】：

我想我已经为 OP 问题找到了一种解决方法——而不是从页面的“on.load”开始的过渡——我发现使用动画进行不透明淡入具有相同的效果，（我正在寻找与OP相同的东西）。

所以我想让正文文本在页面加载时从白色（与网站背景相同）淡入到黑色文本颜色 - 我从星期一开始才开始编码，所以我正在寻找一种“on.load”风格东西代码，但还不知道 JS - 所以这是我的代码，对我来说效果很好。

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

无论出于何种原因，这不适用于 .class 仅适用于 #id's（至少不适用于我的）

希望这会有所帮助 - 据我所知，这个网站对我有很大帮助！

【讨论】：

【解决方案11】：

类似于@Rolf 的解决方案，但跳过对外部函数的引用或使用类。如果 opacity 在加载后保持固定为 1，只需使用内联脚本通过 style 直接更改 opacity。例如

<body class="fadein" onload="this.style.opacity=1">

其中 CSS 样式“fadein”是根据 @Rolf 定义的，定义过渡并将不透明度设置为初始状态（即 0）

唯一的问题是这不适用于 SPAN 或 DIV 元素，因为它们没有有效的 onload 事件

【讨论】：

【解决方案12】：

好的，我已经设法在页面加载时仅使用 css 转换（有点！）实现动画：

我创建了 2 个 CSS 样式表：第一个是我希望在动画之前设置 html 样式的方式... 第二个是我希望页面在动画执行后的样子。

我不完全理解我是如何做到这一点的，但它只有在两个 css 文件（都在我的文档头部）被一些 javascript 分隔时才有效，如下所示。

我已经用 Firefox、safari 和 opera 对此进行了测试。有时动画有效，有时它直接跳到第二个 css 文件，有时页面似乎正在加载但没有显示任何内容（可能只是我？）

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

这是我正在进行的网站的链接：http://www.hankins-design.co.uk/beta2/test/index.html

也许我错了，但我认为不支持 css 转换的浏览器不应该有任何问题，因为它们应该直接跳到第二个 css 文件，没有延迟或持续时间。

我很想知道对这种方法对搜索引擎的友好程度的看法。戴上黑帽我想我可以用关键字填充页面并对其不透明度应用 9999s 延迟。

我很想知道搜索引擎如何处理transition-delay 属性，以及使用上述方法他们是否会看到页面上的链接和信息。

更重要的是，我真的很想知道为什么每次页面加载时都不一致，以及如何纠正这个问题！

如果不出意外，我希望这能产生一些看法和意见！

【讨论】：

我怀疑它完全起作用的原因（当它起作用时）是加载第一个和第二个样式表之间存在延迟（主要是由于等待网络引起的）。由于页面（和相关资源）不再存在，因此很难测试。

【解决方案13】：

并非如此，因为 CSS 会尽快应用，但元素可能尚未绘制。您可以猜测 1 或 2 秒的延迟，但这对于大多数人来说并不合适，具体取决于他们的互联网速度。

此外，例如，如果您想淡入某些内容，则需要隐藏要传递的内容的 CSS。如果用户没有 CSS3 过渡，那么他们将永远看不到它。

我建议使用 jQuery（为了易于使用 + 您可能希望为其他 UA 添加动画）和一些这样的 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 中添加的过渡一起。这样做的好处是，如果需要，可以轻松地在旧版浏览器中使用动画而不是第二个 CSS。

【讨论】：

为什么这个答案被接受了？它并没有真正做问题所要求的任何事情。它只是（并且非常快速，有时不明显）启动元素不可见，等待一小部分秒（200 毫秒）然后立即使其再次可见。那不是褪色，我上次检查过。
你会在 #id_to_fade in 上包含一个 css 过渡，虽然我同意，但从答案中看不太清楚。
如在 jQuery 调用中添加另一个 .css({transition: 'opacity 2s'}) ？或者只是在你的CSS中？我有一种感觉，我会觉得这是一个愚蠢的问题......
没关系——我真的应该放一个演示。在 CSS 中，#id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; } + -o-,-moz- 也是前缀。
这不应该是公认的答案，使用关键帧是要走的路。