让我们看一个例子......

Question

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

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

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

到目前为止我发现了什么

CSS3 transition-delay，一种延迟对元素影响的方法。仅适用于悬停。
CSS3 Keyframe，适用于负载，但速度极慢。因此没用。
CSS3 transition足够快，但不会在页面加载时设置动画。

Answer 1

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

Answer 2

非常需要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';">

这就是所有需要的JavaScript。

Answer 3

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

所以我希望身体文字从白色（与网站背景相同）淡入到页面加载时的黑色文字颜色 - 我自周一以来只编码，所以我一直在寻找一个＆＃39; on.load＆＃39;风格的东西代码，但还不知道JS - 所以这里的代码对我来说很有用。

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

无论出于何种原因，这对.class #id只有"main": [ "dist/css/**/*.css", "dist/sass/**/*.scss", "dist/scripts/component.js" ]起作用（至少不在我的身上）

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

Answer 4

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

答案是“不是真的”。

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

Answer 5

以悬停身体开始它比当鼠标第一次在屏幕上移动时开始它，这大部分是在到达后的一秒钟内，这里的问题是它会在屏幕外反转。

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

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

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

编辑，请参阅以下评论：
这不适用于任何触摸屏设备，因为没有悬停，因此用户不会看到内容，除非他们点击它。 - Rich Bradshaw

Answer 6

与@ Rolf的解决方案类似，但跳过对外部函数的引用或与类一起玩。如果加载后不透明度保持固定为1，只需使用内联脚本通过样式直接更改不透明度。例如

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

CSS sytle＆＃34; fadein＆＃34;根据@Rolf定义，定义转换并将不透明度设置为初始状态（即0）

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

Answer 7

好的，当页面仅使用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属性，以及使用上面的方法，他们是否会看到页面上的链接和信息。

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

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

Answer 8

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

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个过渡声明，并且（不是真的）认为它会同时使用这两个。

Answer 9

仅延迟3秒的CSS

这里要注意几点：

一次通话即可播放多个动画
我们创建了一个 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; }
}

Answer 10

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

使用它作为body标签：请注意，this.或querySelector对我不起作用。只有长; classList.remove允许使用<body class="onload" onload="document.querySelector('body').classList.remove('onload')">（Linux Chromium）

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

并将此行添加到其他CSS规则之上。

:none !important

请注意，这可以简单地通过使用不透明度作为过渡触发器来应用于不透明度（按照OP [其他海报]的要求）。（甚至可能以相同的方式处理其他任何CSS规则，并且您可以使用多个类在触发之间进行显式延迟）

逻辑是相同的。不执行任何转换（在body.onload的所有子元素上使用#rotated{ transform : rotate(90deg) /* any other transformation */; transition 3s; } #translated{ transform : translate(90px) /* any other transformation */; transition 3s; } .waitload{ transform: none !important; }，并且在文档加载后，删除该类以触发CSS中指定的所有元素上的所有转换。

下面的第一个答案（请参阅上面的“更简短的答案”）

这是一个反向解决方案：

进行html布局并相应地将css设置为最终结果（具有所需的所有转换）。
将过渡属性设置为您喜欢的
将一个类（例如：waitload）添加到要转换后的元素上。 CSS关键字！important 是此处的关键字。
文档加载后，使用JS从元素中删除类以开始转换（并删除转换：无覆盖）。

在多个元素上进行多次转换。没有尝试跨浏览器兼容性。

<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>

{{1}}

Answer 11

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

Answer 12

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

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

如果你想让它加载得更慢，请增加缓出时间

Answer 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。

加载css3过渡动画？

13 个答案:

让我们看一个例子......

分解......