你可以在页面加载时运行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 */

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

W3C是这么说的。

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

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

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

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

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

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

你也可以使用自定义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>
    );
};

不一定，因为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。

好吧，我已经成功地实现了一个动画，当页面加载仅使用css过渡(sort of!):

我已经创建了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延迟。

我很想知道搜索引擎是如何处理转换延迟属性的，以及使用上述方法，他们是否甚至可以看到页面上的链接和信息。

更重要的是，我真的想知道为什么这是不一致的每次页面加载，我怎么能纠正这一点!

我希望这能产生一些观点和意见，如果没有别的!