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

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

image-slider.html

到目前为止我发现了什么

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


当前回答

我想我已经找到了一种解决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>
    );
};

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

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

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

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

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

它将在鼠标第一次在屏幕上移动时开始,这主要是在到达后的一秒钟内,这里的问题是它将在离开屏幕时反转。

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

这是我能想到的最好的东西:http://jsfiddle.net/faVLX/

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

编辑见下面的评论: 这在任何触屏设备上都行不通,因为没有悬停,所以用户只有点击才会看到内容。——里奇·布拉德肖

这是一个棘手的问题。

答案是“不太可能”。

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

好吧,我已经成功地实现了一个动画,当页面加载仅使用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延迟。

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

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

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