当前位置：文江博客话题详情

加载时css3过渡动画？

发布于 2024-11-25 17:54:25 字数 659 浏览 0 评论 0原文

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

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

image-slider.html

到目前为止我发现的

CSS3 transition-delay，一种延迟元素效果的方法。仅适用于悬停。
CSS3 关键帧，可以在加载时工作，但速度极慢。因此没有用。
CSS3 转换足够快，但不会在页面加载时设置动画。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失去的东西太少 2024-12-02 17:54:25

您可以在页面加载时运行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 的规定。

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

Let's Look at an Example...

Here's a demonstration of a navigation menu sliding into place using CSS3 only:

@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>

Break it down...

The important parts here are the keyframe animation which we call slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

...which basically says "at the start, the header will be off the left hand edge of the screen by its full width and at the end will be in place".

The second part is calling that slideInFromLeft animation:

animation: 1s ease-out 0s 1 slideInFromLeft;

Above is the shorthand version but here is the verbose version for clarity:

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 */

You can do all sorts of interesting things, like sliding in content, or drawing attention to areas.

Here's what W3C has to say.

回复收藏 0 原文

甩你一脸翔 2024-12-02 17:54:25

需要很少的 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';" class="fadein">

这就是所需要的所有 JavaScript。

Very little Javascript is necessary:

window.onload = function() {
    document.body.className += " loaded";
}

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

I know the question said "without Javascript", but I think it's worth pointing out that there is an easy solution involving one line of Javascript.

It could even be inline Javascript, something like that:

<body onload="document.body.className += ' loaded';" class="fadein">

That's all the JavaScript that's needed.

回复收藏 0 原文

梦罢 2024-12-02 17:54:25

我想我已经找到了解决OP问题的一种方法 - 而不是从页面的“on.load”开始的过渡 - 我发现使用动画进行不透明度淡入具有相同的效果，（我正在寻找与OP相同）。

所以我想让正文文本在页面加载时从白色（与网站背景相同）淡入黑色文本颜色 - 而且我从周一才开始编码，所以我正在寻找“on.load”样式的代码，但还不知道 JS - 所以这是我的代码，对我来说效果很好。

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

无论出于何种原因，这不适用于 .class 仅 #id（至少对我来说）

希望这会有所帮助 - 据我所知，这个网站可以帮助我很多！

I think I have found a sort of work around for the OP question - instead of a transition beginning 'on.load' of the page - I found that using an animation for an opacity fade in had the same effect, (I was looking for the same thing as OP).

So I wanted to have the body text fade in from white(same as site background) to black text colour on page load - and I've only been coding since Monday so I was looking for an 'on.load' style thing code, but don't know JS yet - so here is my code that worked well for me.

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

And for whatever reason, this doesn't work for .class only #id's(at least not on mine)

Hope this helps - as I know this site helps me a lot!

回复收藏 0 原文

失去的东西太少 2024-12-02 17:54:25

CSS 仅延迟 3 秒

这里需要注意几点：

一次调用中的多个动画，
我们创建一个 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; }
}

CSS only with a delay of 3s

a few points to take here:

multiple animations in one call
we create a wait animation that just delays the actual one (the second one in our case).

Code:

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

回复收藏 0 原文

以为你会在 2024-12-02 17:54:25

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

答案是“并非如此”。

CSS 不是一个功能层。它不知道发生了什么或何时发生。它仅用于将表示层添加到不同的“标志”（类、id、状态）。

默认情况下，CSS/DOM 不提供任何类型的“加载”状态供 CSS 使用。如果您想要/能够使用 JavaScript，您可以为 body 分配一个类或其他东西来激活某些 CSS。

话虽如此，您可以为此创建一个 hack。我将在这里举一个例子，但它可能适用也可能不适用于您的情况。

我们假设“关闭”是“足够好”：

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

Well, this is a tricky one.

The answer is "not really".

CSS isn't a functional layer. It doesn't have any awareness of what happens or when. It's used simply to add a presentational layer to different "flags" (classes, ids, states).

By default, CSS/DOM does not provide any kind of "on load" state for CSS to use. If you wanted/were able to use JavaScript, you'd allocate a class to body or something to activate some CSS.

That being said, you can create a hack for that. I'll give an example here, but it may or may not be applicable to your situation.

We're operating on the assumption that "close" is "good enough":

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

Here's an excerpt of our CSS stylesheet:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

We're also on the assumption that modern browsers render progressively, so our last element will render last, and so this CSS will be activated last.

回复收藏 0 原文

醉酒的小男人 2024-12-02 17:54:25

将其添加到您的 CSS 中以实现动画淡入淡出，

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

如果您希望加载速度较慢，则可以增加缓出时间

add this to your css for fade in animation

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

increase the ease-out time if you want it to load slower

回复收藏 0 原文

拥抱影子 2024-12-02 17:54:25

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

使用它作为正文标签：
请注意， body. 或 this. 对我不起作用。只有长； querySelector 允许使用 classList.remove (Linux Chromium)

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

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

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

请注意，只需使用不透明度作为转换触发器即可将其应用于不透明度（按照 OP [其他海报] 的要求）。（甚至可能以相同的方式适用于任何其他 css 规则，并且您可以使用多个类来在触发之间显式延迟）

逻辑是相同的。强制不进行转换（在 body.onload 的所有子元素上使用 :none !important，并且一旦加载文档，就删除该类以触发所有元素上指定的所有转换你的CSS。

下面的第一个答案（参见上面的编辑以获取更简短的答案）

这是一个相反的解决方案：

制作你的html布局并根据你的最终结果设置CSS（以及你的所有转换）在
根据您的喜好设置转换属性，
CSS 关键字 !important 是此处的关键字。
加载后向要转换的元素添加一个类（例如：waitload），加载后，使用 JS 从元素中删除类以开始转换（并删除转换：无覆盖）。

未尝试跨浏览器兼容性。

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>

Even simplier solution (still with [one line inline] javascript):

Use this as the body tag:
Note that body. or this. did not work for me. Only the long ; querySelector allow the use of classList.remove (Linux Chromium)

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

and add this line on top of your other css rules.

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

Take note that this can apply to opacity (as requested by OP [other posters] ) simply by using opacity as a transition trigger instead. (might even work on any other css ruling in the same fashion and you can use multiple class for explicity delay between triggering)

The logic is the same. Enforce no transform (with :none !importanton all child element of body.onloadand once the document is loaded remove the class to trigger all transition on all elements as specified in your css.

FIRST ANSWER BELOW (SEE EDIT ABOVE FOR SHORTER ANSWER)

Here is a reverse solution:

Make your html layout and set the css accordingly to your final result (with all the transformation you want).
Set the transition property to your liking
add a class (eg: waitload) to the elements you want to transform AFTER load. The CSS keyword !important is the key word here.
Once the document is loaded, use JS to remove the class from the elements to to start transformation (and remove the transition: none override).

Works with multiple transition on multiple elements. Did not try cross-browser compatibility.

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>

回复收藏 0 原文

静待花开 2024-12-02 17:54:25

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

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

每个 @Rolf 定义 CSS sytle“fadein”，定义过渡并将不透明度设置为初始状态（即 0），

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

Similar to @Rolf's solution, but skip reference to external functions or playing with class. If opacity is to remain fixed to 1 once loaded, simply use inline script to directly change opacity via style. For example

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

where CSS sytle "fadein" is defined per @Rolf,defining transition and setting opacity to initial state (i.e. 0)

the only catch is that this does not work with SPAN or DIV elements, since they do not have working onload event

回复收藏 0 原文

空城缀染半城烟沙 2024-12-02 17:54:25

当鼠标第一次在屏幕上移动时启动它，这通常是在到达后的一秒钟内，这里的问题是当它离开屏幕时它会反转。

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

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

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

编辑请参阅下面的评论：
这不适用于任何触摸屏设备，因为没有悬停，因此用户除非点击，否则不会看到内容。 ——里奇·布拉德肖

start it with hover of body than It will start when the mouse first moves on the screen, which is mostly within a second after arrival, the problem here is that it will reverse when out of the screen.

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

thats the best thing I can think of: http://jsfiddle.net/faVLX/

fullscreen: http://jsfiddle.net/faVLX/embedded/result/

Edit see comments below:
This will not work on any touchscreen device because there is no hover, so the user won't see the content unless they tap it. – Rich Bradshaw

回复收藏 0 原文

So要识趣 2024-12-02 17:54:25

好吧，我已经成功地在页面加载时仅使用 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 html

也许我错了但我认为不支持 css 转换的浏览器应该不会有任何问题，因为它们应该直接跳到第二个 css 文件，没有延迟或持续时间。

我有兴趣了解这种方法对搜索引擎的友好程度的看法。戴着黑帽，我想我可以用关键字填充一个页面，并对其不透明度应用 9999 秒的延迟。

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

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

我希望这能引起一些观点和意见！

Ok I have managed to achieve an animation when the page loads using only css transitions (sort of!):

I have created 2 css style sheets:
the first is how I want the html styled before the animation...
and the second is how I want the page to look after the animation has been carried out.

I don't fully understand how I have accomplished this but it only works when the two css files (both in the head of my document) are separated by some javascript as follows.

I have tested this with Firefox, safari and opera. Sometimes the animation works, sometimes it skips straight to the second css file and sometimes the page appears to be loading but nothing is displayed (perhaps it is just me?)

<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" />

Here is a link to my work-in-progress website: http://www.hankins-design.co.uk/beta2/test/index.html

Maybe I'm wrong but I thought browsers that do not support css transitions should not have any issues as they should skip straight to the second css file without delay or duration.

I am interested to know views on how search engine friendly this method is. With my black hat on I suppose I could fill a page with keywords and apply a 9999s delay on its opacity.

I would be interested to know how search engines deal with the transition-delay attribute and whether, using the method above, they would even see the links and information on the page.

More importantly I would really like to know why this is not consistent each time the page loads and how I can rectify this!

I hope this can generate some views and opinions if nothing else!

回复收藏 0 原文

挽清梦 2024-12-02 17:54:25

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

超文本标记语言

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

If anyone else had problems doing two transitions at once, here's what I did. I needed text to come from top to bottom on page load.

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

Don't know why I kept trying to use 2 transition declarations in 1 selector and (not really) thinking it would use both.

回复收藏 0 原文

So要识趣 2024-12-02 17:54:25

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

You could use custom css classes (className) instead of the css tag too.
No need for an external package.

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

回复收藏 0 原文

分開簡單 2024-12-02 17:54:25

正在提议一个新的 CSS at 规则，以允许在页面加载并显示元素后开始转换。

div {
     transform: translateX(0);
     transition: translateX 100ms;
     @starting-style {
          transform: translateX(-100%);
     }
}

注意：并非所有主要浏览器都支持此 at 规则

引用： mdn @starting-style

A new CSS at-rule is being proposed to allow transitions to start once the page is loaded and the element is displayed.

div {
     transform: translateX(0);
     transition: translateX 100ms;
     @starting-style {
          transform: translateX(-100%);
     }
}

Note: no all major browsers are supporting this at-rule

reference: mdn @starting-style

回复收藏 0 原文

彻夜缠绵 2024-12-02 17:54:25

并非如此，因为 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 中添加的过渡。这样做的优点是，如果需要，可以轻松地允许在旧版浏览器中使用 animate 而不是第二个 CSS。

Not really, as CSS is applied as soon as possible, but the elements might not be drawn yet. You could guess a delay of 1 or 2 seconds, but this won't look right for most people, depending on the speed of their internet.

In addition, if you want to fade something in for instance, it would require CSS that hides the content to be delivered. If the user doesn't have CSS3 transitions then they would never see it.

I'd recommend using jQuery (for ease of use + you may wish to add animation for other UAs) and some JS like this:

$(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.
});

Along with the transitions added in the CSS. This has the advantage of easily allowing the use of animate instead of the second CSS in legacy browsers if required.

回复收藏 0 原文

~没有更多了~