8 回答

您可以在页面加载时运行 CSS 动画，而无需使用任何JavaScript;你只需要使用 CSS3 Keyframes .

让我们来看一个例子......

以下是仅使用 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);
    }
}

...基本上说“在开始时， Headers 将从屏幕的左边缘以其全宽度离开，并且最后将到位” .

第二部分是调用 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 */

你可以做各种有趣的事情，比如滑动内容，或引起对区域的注意 .

Here's what W3C has to say.

回复于 2024-04-29T16:33:00+08:00

很少有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';">

这就是所有需要的JavaScript .

回复于 2024-04-29T16:33:00+08:00

-3
我觉得我已经找到了OP问题的一种解决方法 - 而不是从页面的'on.load'开始的过渡 - 我发现使用动画来实现不透明效果的效果相同，（我一直在寻找与OP相同的事情 .

所以我希望在页面加载时将正文文本从白色（与网站背景相同）淡入到黑色文本颜色 - 而且我从星期一开始只编码所以我正在寻找'on.load'样式的事物代码，但是还不知道JS - 所以这里的代码对我来说效果很好 .
```
#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}
```
无论出于何种原因，这不适用_1748665_只有 #id （至少不是我的）

希望这会有所帮助 - 我知道这个网站对我有很大的帮助！
回复于 2024-04-29T16:33:00+08:00
5
嗯，这是一个棘手的问题 .

答案是“不是真的” .

CSS不知道发生了什么或什么时候发生了什么 . 它仅用于向不同的"flags"（类，ID，状态）添加表示层 .

默认情况下，CSS / DOM不提供任何类型的"on load"状态供CSS使用 . 如果你想/能够使用JavaScript，你可以为 body 分配一个类来激活一些CSS .

话虽这么说，你可以为此创建一个hack . 我会在这里给出一个例子，但它可能适用于你的情况，也可能不适用 .

我们的假设是“接近”是“足够好”：
```
<html>
<head>

</head>
<body>
    
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>
```
这是我们的CSS样式表的摘录：
```
.onLoad
{
    -webkit-animation:bounceIn 2s;
}
```
我们还假设现代浏览器逐步渲染，因此我们的最后一个元素将最后呈现，因此最后将激活此CSS .
回复于 2024-04-29T16:33:00+08:00
23
与@Rolf的解决方案类似，但跳过对外部函数的引用或与类一起玩 . 如果加载后不透明度保持固定为1，只需使用内联脚本通过样式直接更改不透明度 . 例如
```
<body class="fadein" onload="this.style.opacity=1">
```
其中CSS sytle“fadein”是根据@Rolf定义的，定义转换并将不透明度设置为初始状态（即0）

唯一的问题是这不适用于SPAN或DIV元素，因为它们没有工作onload事件
回复于 2024-04-29T16:33:00+08:00
1
当鼠标首次在屏幕上移动时，它会在鼠标首次移动时启动它，这个问题大部分时间是在到达之后的一秒内，这里的问题是当它离开屏幕时会反转 .
```
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
```
这是我能想到的最好的事情：http://jsfiddle.net/faVLX/

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

Edit see comments below:
这不适用于任何触摸屏设备，因为没有悬停，因此用户不会看到内容，除非他们点击它 . - Rich Bradshaw
回复于 2024-04-29T16:33:00+08:00
364
好吧，当页面仅使用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

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

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

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

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

我希望这可以产生一些观点和意见，如果没有别的！
回复于 2024-04-29T16:33:00+08:00
18
不是真的，因为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的优点 .
回复于 2024-04-29T16:33:00+08:00

加载css3过渡动画？

8 回答

让我们来看一个例子......

分解......

相关问题