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

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

图像滑块.html https://web.archive.org/web/20141021062316/http://rilwis.googlecode.com:80/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

• CSS3 转换延迟 http://trentwalton.com/2010/03/30/css3-transition-delay/，一种延迟对元素的影响的方法。仅适用于悬停。
• CSS3 关键帧 http://www.leemunroe.com/animation/animation3.html，可以在负载下工作，但速度非常慢。因此没有用。
• CSS3 过渡 http://www.nealgrosskopf.com/tech/resources/45/速度足够快，但不会在页面加载时设置动画。

You can run a CSS页面加载动画，无需使用任何 JavaScript；你只需要使用CSS3 关键帧.

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

这是使用以下方式滑动到位的导航菜单的演示CSS3 only:

@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 的说法。 http://www.w3.org/TR/css3-animations/#keyframes