是否有可能使用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不起作用(至少对我的不起作用)

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

其他回答

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

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

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

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

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

类似于@Rolf的解决方案,但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载,只需使用内联脚本直接改变不透明度通过风格。例如

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

其中CSS sytle“fadein”是根据@Rolf定义的,定义过渡和设置不透明度为初始状态(即0)

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

更简单的解决方案(仍然使用[一行内联]javascript):

使用这个作为正文标签: 注意这个主体。或者这个。对我没用。只有长久;querySelector允许使用classList。remove (Linux Chromium)

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

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

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

请注意,这可以应用于不透明度(正如OP[其他海报]所要求的那样),只需使用不透明度作为过渡触发器即可。(甚至可以工作在任何其他CSS规则以相同的方式,你可以使用多个类之间的触发显式延迟)

逻辑是一样的。强制不转换(with:none !importanton body的所有子元素。Onloadand一旦文档被加载,删除类以触发css中指定的所有元素上的所有转换。

下面是第一个答案(见上面的简短回答)

这里有一个相反的解决方案:

制作你的html布局,并根据你的最终结果设置css(与所有你想要的转换)。 根据您的喜好设置转换属性 添加一个类(例如:waitload)到你想在加载后转换的元素。CSS关键字!important是这里的关键字。 一旦文档被加载,使用JS从元素中删除类以开始转换(并删除转换:none override)。

在多个元素上使用多重转换。没有尝试跨浏览器兼容性。

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>

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