css3过渡动画负载？ [英] css3 transition animation on load?

问题描述

是否可以在网页加载时使用CSS3过渡动画，而不使用Javascript？

这是我想要的， / strong>

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

到目前为止我发现了

• CSS3 transition-delay ，一种延迟对元素的影响的方法。


• CSS3关键帧，工作负载，但极端慢。


• CSS3转换足够快，但不会在网页加载时生成动画。

解决方案

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

这里是一个使用 CSS3 ：

---

这是代码：

  @keyframes dropHeader {0％{transform：translateY（-100％）; } 100％{transform：translateY（0）; }} header {background：#ccc; padding：30px; / *这一部分调用我们在上面定义的dropHeader动画* / animation-name：dropHeader; animation-iteration-count：1;动画定时功能：轻松; animation-duration：0.6s;} / *为美观添加* / body {margin：0; font-family：Segoe UI，Arial，Helvetica，Sans Serif;} a {text-decoration：none; display：inline-block; margin-right：10px;}  

 < header& < a href =＃>首页< / a> < a href =＃>关于< / a> < a href =＃>产品< / a> < a href =＃>联系人< / a>< / header>  

这里的重要部分是关键帧动画：

  @keyframes dropHeader {
 0％ {
 transform：translateY（-100％）; 
} 
 100％{
 transform：translateY（0）; 
} 
} 
  

第二部分是调用这个动画：

  animation-name：dropHeader; / *我们在上面定义的动画的名称* / 
 animation-iteration-count：1; / *动画将播放多少次* / 
 animation-timing-function：ease-out; / *动画的行为方式* / 
 animation-duration：0.6s; / *动画的持续时间* / 
  

这里我们使用动画的名称（dropHeader）设置各种属性。

为了便于理解，我已经分离了动画属性，但如果您愿意，可以使用短版本：

  animation：4s ease-out 0s 1 dropHeader; 
  

您可以执行各种有趣的事情，例如滑动内容或吸引注意力。 / p>

这是W3C必须说的内容。

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

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

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

What I found so far

• CSS3 transition-delay, a way to delay effects on elements. Only works on hover.
• CSS3 Keyframe, works on load but are extremly slow. Not useful because of that.
• CSS3 transition is fast enough but don't animate on page load.

解决方案

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

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

---

Here's the code:

@keyframes dropHeader {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

header {
  background: #ccc;
  padding: 30px;
  
  /* this section calls the dropHeader animation we defined above */
  animation-name: dropHeader;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.6s;
}

/* Added for aesthetics */
body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;}
a {text-decoration: none; display: inline-block; margin-right: 10px;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

The important parts here are the keyframe animation:

@keyframes dropHeader {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

which basically says "at the start, the header will be translated vertically by -100% of it's height and at the end won't be translated".

The second part is calling that animation:

animation-name: dropHeader; /* the name of the animation we defined above */
animation-iteration-count: 1; /* how many times the animation will play */
animation-timing-function: ease-out; /* how the animation will behave */
animation-duration: 0.6s; /* the duration of the animation */

Here we use the name of the animation (dropHeader) and set various properties against it.

For ease of understanding I have separated the animation properties but you could use the short hand version if you prefer:

animation: 4s ease-out 0s 1 dropHeader;

You can do all sorts of interesting things, like sliding in content, or drawing attention to areas.

Here's what W3C has to say.

这篇关于css3过渡动画负载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！