加载时有css3过渡动画？

195

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

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

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

我到目前为止发现的

  • CSS3 transition-delay，一种延迟对元素的影响的方法。仅适用于悬停。
  • CSS3 Keyframe，可在负载下工作，但运行速度极慢。因此没有用。
  • CSS3过渡足够快，但不会在页面加载时进行动画处理。
css  webkit  css-transitions  css-animations 
— 延斯·托内尔
source
— NickFitz
2
当不支持CSS3动画时，关键帧将完成此操作并提供最佳的后备。您为什么认为它们太慢？
— zachleat
嗨！链接现在断开了，我不知道该去哪里了，所以有人可以修复它！
— Linux4Life531

Answers:

458

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

— 克里斯·斯皮特尔斯
source
20
是什么使它在页面加载时（而不是以前的版本）运行？
— 罗尔夫（Rolf）2013年
2
只是为了回答上述问题，默认情况下，动画在应用后开始显示0s，没有延迟。可以设置其他属性animation-delay来控制它。参见：w3.org/TR/css3-animations/#animation-delay-property
— Michael Davis，
2
为确保动画将在文档加载后开始，请将动画代码放置在body元素下方的样式表或body元素底部的样式标签中。
— TaylorMac
据我所知@ SuzanneEdelmanCreoconcept，IE9不支持transition属性。您可以选择JS或正常降级。
— 克里斯·斯皮茨
1
极好的答案，在2019年对我有帮助！
— Gosi
28

几乎不需要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;
}

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

它甚至可以是内联Javascript，如下所示：

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

这就是所有需要的JavaScript。

— 罗尔夫
source
2
一点修正：<body onload =“ document.body.setAttribute（'class'，'loaded'）”>“>
— Ivan
1
如果不需要等待页面onLoad事件，请在</ body>标记之前插入以下代码：<script type =“ text / javascript”> document.body.setAttribute（'class'，'loaded'）; </ script>
— Ivan
6
为避免覆盖现有body类，请使用：document.body.classList.add('loaded)
— Vyacheslav Cotruta 2015年
1
我发现document.body.className += " loaded";要稍微少冗长的添加了loaded类现有的类。
— Pim Schaaf
1
@PimSchaaf感谢您的建议，这完全有道理。我现在将对其进行编辑。如今，您还可以使用classList，它更加优雅（但兼容性较差）。
— 罗尔夫
20

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

所以我想让正文文本在页面加载时从白色（与站点背景相同）逐渐变为黑色文本颜色-而且我从星期一开始才开始编码，所以我正在寻找“ on.load”风格的事物代码，但还不了解JS-这是我的代码，对我来说效果很好。 

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

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

希望对您有所帮助-据我所知，此站点对我有很大帮助！

— 李约翰
source
6

好吧，这是一个棘手的问题。

答案是“不是真的”。

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

我们还假设现代浏览器将逐步渲染，因此我们的last元素将最后渲染，因此此CSS将最后激活。

— 狡猾的
source
1

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

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

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

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

— 用户名
source
1

用鼠标悬停启动它，它将比鼠标悬停在屏幕上（通常在到达后的一秒钟之内）启动时要启动，这里的问题是当屏幕外时它将反转。

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

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

全屏显示：http：//jsfiddle.net/faVLX/embedded/result/

编辑以下内容，以查看评论：
由于没有悬停，因此在任何触摸屏设备上均不起作用，因此除非用户点击内容，否则不会看到内容。–布拉德肖（Rich Bradshaw）

— beardhatcode
source
是的，我自己弄清楚了。如果没有其他办法，这是一个好的解决方法。一票赞成。
— 詹斯·托内尔（JensTörnell）2011年
13
这是一个糟糕的主意–在任何触摸屏设备上都没有悬停，因此用户只有轻按内容，才能看到内容。
— Rich Bradshaw
1

CSS仅延迟3秒

这里有几点要注意：

  • 一次通话即可播放多个动画
  • 我们创建了一个等待动画，它只是延迟了实际的动画（在本例中为第二个动画）。

码：

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; }
}
— 克劳迪乌
source
0

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

我创建了2个CSS样式表：第一个是我希望动画在动画之前设置样式的方式...第二个是我希望动画执行后页面的显示方式。

我不完全了解如何完成此操作，但是仅当两个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延迟。

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

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

我希望这能产生一些看法和意见！

— 迈克尔·沃克林
source
0

如果有人在一次执行两次转换时遇到问题，这就是我所做的。我需要文本在页面加载时从上到下排列。

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

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

— s3c
source
0

更简单的解决方案（仍然使用[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规则，并且您可以使用多个类在触发之间进行显式延迟）

逻辑是一样的。不执行任何转换（:none !important对的所有子元素加上，body.onload并在加载文档后删除该类，以触发CSS中指定的所有元素上的所有转换。

下面的第一答案（请参阅上面的“更短答案”）

这是一个反向解决方案：

  1. 使您的html布局，并相应地将css设置为最终结果（具有所需的所有转换）。
  2. 将过渡属性设置为您喜欢的
  3. 将一个类（例如：waitload）添加到要转换后的元素上。CSS关键字！important是此处的。
  4. 加载文档后，使用JS从元素中删除类以开始转换（并删除转换：无覆盖）。

对多个元素进行多次转换。没有尝试跨浏览器兼容性。

#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>
— 路易斯·路多格·特罗捷
source
-2

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

— 里奇·布拉德肖
source
17
为什么这个答案被接受？它实际上并没有做什么问题所要求的。它简单地（非常快，有时不引人注意）开始使元素不可见，等待一秒钟（200 ms），然后立即使其再次可见。那不是褪色，最后我检查了一下。
— VoidKing 2012年
您会在上包含一个CSS过渡#id_to_fade in，尽管我同意，但答案尚不清楚。
— Rich Bradshaw 2012年
如在其中，将另一个.css（{transition：'opacity 2s'}）添加到jQuery调用中？还是只是在您的CSS中？我觉得我会觉得这是一个愚蠢的问题……
— VoidKing 2012年
3
没关系–我真的应该演示一下。在CSS中，#id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-，-moz-前缀为好。
— Rich Bradshaw 2012年
2
这不应该被接受，答案是使用关键帧。
— 爱德华多·纳维达
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.