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

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

image-slider.html

到目前为止我发现了什么

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


当前回答

你可以在页面加载时运行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淡入动画

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

如果你想让它加载得更慢,就增加放松时间

你也可以使用自定义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不是一个功能层。它不知道发生了什么,什么时候发生。它只是用来为不同的“标志”(类、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是最后激活的。

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

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

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

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

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

如果有人同时做两个过渡有问题,这是我做的。我需要文字从上到下的页面加载。

超文本标记语言

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

超文本标记语言

<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个转换声明,(不是真的)认为它会使用两者。