是否有可能使用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是尽快应用的,但元素可能还没有绘制。你可以猜测延迟1或2秒,但这对大多数人来说并不合适,这取决于他们的互联网速度。

此外,如果你想淡入一些东西,例如,它将需要CSS隐藏要交付的内容。如果用户没有CSS3转换,那么他们将永远不会看到它。

我推荐使用jQuery(为了方便使用+你可能希望为其他无人机添加动画)和一些像这样的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。

这是一个棘手的问题。

答案是“不太可能”。

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是最后激活的。

类似于@Rolf的解决方案,但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载,只需使用内联脚本直接改变不透明度通过风格。例如

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

其中CSS sytle“fadein”是根据@Rolf定义的,定义过渡和设置不透明度为初始状态(即0)

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

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

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

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

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

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

它将在鼠标第一次在屏幕上移动时开始,这主要是在到达后的一秒钟内,这里的问题是它将在离开屏幕时反转。

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

这是我能想到的最好的东西:http://jsfiddle.net/faVLX/

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

编辑见下面的评论: 这在任何触屏设备上都行不通,因为没有悬停,所以用户只有点击才会看到内容。——里奇·布拉德肖