如何加载css3过渡动画?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (95)

有没有可能使用页面加载CSS3转换动画,而不使用JavaScript?

这是我想要的,但在页面加载:

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

我到目前为止发现的

  • CSS3转换延迟,一种延迟对元素的影响的方法。只适用于悬停。
  • CSS3的关键帧,负载工作,但速度非常缓慢。没有用,因为这一点。
  • CSS3过渡足够快,但不要在页面加载时动画。
提问于
用户回答回答于

你可以在页面加载运行CSS动画而不使用任何JavaScript; 你只需要使用CSS3关键帧

用户回答回答于

很少的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。

扫码关注云+社区

领取腾讯云代金券