当前位置：theitroad>CSS 加载时的css3过渡动画？

CSS 加载时的css3过渡动画？

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/6805482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 01:05:59 　来源:igfitidea点击:

css3 transition animation on load?

csswebkitcss-transitionscss-animations

提问by Jens T?rnell

Is it possible to use CSS3 transition animation on page load without using Javascript?

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

This is kind of what I want, but on page load:

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

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

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

What I found so far

到目前为止我发现了什么

回答by Chris Spittles

You canrun a CSSanimation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

您可以在页面加载时运行CSS动画，而无需使用任何 JavaScript；你只需要使用CSS3 关键帧。

Let's Look at an Example...

让我们看一个例子...

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

这是仅使用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>

Break it down...

打破它...

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

这里的重要部分是关键帧动画，我们称之为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 slideInFromLeftanimation:

第二部分是调用该slideInFromLeft动画：

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.

这就是 W3C 必须说的。

回答by Rolf

Very little Javascript is necessary:

只需要很少的 Javascript：

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

Now the CSS:

现在的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.

我知道这个问题说“没有 Javascript”，但我认为值得指出的是，有一个简单的解决方案涉及一行 Javascript。

It could even be inline Javascript, something like that:

它甚至可以是内联 Javascript，类似这样：

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

That's all the JavaScript that's needed.

这就是所需的全部 JavaScript。

回答by Lee John

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).

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

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

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

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

而无论出于何种原因，这并不对工作.class只#id的（至少不是我的）

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

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

回答by foxy

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 presentationallayer to different "flags" (classes, ids, states).

CSS 不是功能层。它对发生什么或何时发生没有任何意识。它仅用于向不同的“标志”（类、ID、状态）添加表示层。

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 bodyor something to activate some CSS.

默认情况下，CSS/DOM 不提供任何类型的“加载时”状态供 CSS 使用。如果您想要/能够使用 JavaScript，您可以分配一个类body或某物来激活某些 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:

这是我们的 CSS 样式表的摘录：

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

我们还假设现代浏览器是渐进式渲染的，所以我们的最后一个元素将最后渲染，因此这个 CSS 将最后激活。

回答by beardhatcode

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.

从 body 悬停开始它会在鼠标第一次在屏幕上移动时开始，这主要是在到达后的一秒内，这里的问题是它在离开屏幕时会反转。

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

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

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

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

全屏：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

编辑见下面的评论：
这在任何触摸屏设备上都不起作用，因为没有悬停，所以用户不会看到内容，除非他们点击它。– 丰富的布拉德肖

回答by user3907296

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

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

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

其中 CSS 样式“淡入淡出”是根据 @Rolf 定义的，定义转换并将不透明度设置为初始状态（即 0）

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

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

回答by Claudiu

CSS only with a delay of 3s

CSS 仅延迟 3 秒

a few points to take here:

这里要注意几点：

  • multiple animations in one call
  • we create a waitanimation 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; }
}

回答by Louis Loudog Trottier

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

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

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

将此用作正文标签：请注意，body.或this.对我不起作用。只有长；querySelector允许使用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.

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

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)

请注意，这可以通过使用不透明度作为转换触发器来应用于不透明度（根据 OP [其他海报] 的要求）。（甚至可以以相同的方式处理任何其他 css 规则，您可以使用多个类在触发之间明确延迟）

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.

逻辑是一样的。强制不执行转换（:none !important在所有子元素上body.onload，一旦加载文档，删除类以触发 css 中指定的所有元素上的所有转换。

FIRST ANSWER BELOW (SEE EDIT ABOVE FOR SHORTER ANSWER)

下面的第一个答案（请参阅上面的编辑以获得更短的答案）

Here is a reverse solution:

这是一个反向解决方案：

  1. Make your html layout and set the css accordingly to your final result (with all the transformation you want).
  2. Set the transition property to your liking
  3. add a class (eg: waitload) to the elements you want to transform AFTER load. The CSS keyword !importantis the key word here.
  4. Once the document is loaded, use JS to remove the class from the elements to to start transformation (and remove the transition: none override).
  1. 制作您的 html 布局并根据您的最终结果设置相应的 css（以及您想要的所有转换）。
  2. 根据您的喜好设置过渡属性
  3. 将类（例如：waitload）添加到要在加载后转换的元素。CSS 关键字!important是这里的关键词。
  4. 加载文档后，使用 JS 从元素中删除类以开始转换（并删除转换：无覆盖）。

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

适用于多个元素的多个过渡。没有尝试跨浏览器兼容性。

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.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">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>

回答by s3c

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

HTML 

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

HTML

HTML 

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

CSS

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.

不知道为什么我一直尝试在 1 个选择器中使用 2 个转换声明并且（不是真的）认为它会同时使用这两个。

回答by Michael Walkling

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

好的，当页面加载仅使用 css 转换（有点！）时，我设法实现了动画：

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.

我创建了 2 个 css 样式表：第一个是我希望在动画之前设置 html 样式的方式……第二个是我希望页面在执行动画后的外观。

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.

我不完全理解我是如何完成这个的，但它只有在两个 css 文件（都在我的文档的头部）被一些 javascript 分隔时才有效，如下所示。

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?)

我已经用 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" />

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

这是我正在进行的工作网站的链接：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.

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

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.

我很想知道这种方法对搜索引擎的友好程度。戴上我的黑帽子，我想我可以用关键字填充页面并对其不透明度应用 9999 秒的延迟。

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.

我很想知道搜索引擎如何处理 transition-delay 属性，以及使用上述方法，他们是否甚至会看到页面上的链接和信息。

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!

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

相关推荐

CSS 将 z-index 应用于 SVG 路径

CSS 将 z-index 应用于 SVG 路径

将 CSS 应用于嵌套在 <h:selectOneMenu> 中的 <f:selectItem>

将 CSS 应用于嵌套在 <h:selectOneMenu> 中的 <f:selectItem>

CSS 仅适用于 Chrome 的 CSS3 填充顶部和底部

CSS 仅适用于 Chrome 的 CSS3 填充顶部和底部

CSS 哪个优先，内联还是类？

CSS 哪个优先，内联还是类？

相关推荐
最近更新
标签