加载 css3 过渡动画？

Question

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

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

image-slider.html

到目前为止我发现了什么

• > CSS3 transition-delay ，一种延迟对元素产生影响的方法。仅适用于悬停。
• > CSS3 Keyframe ，在负载下工作，但速度极慢。因此没有用。
• > CSS3 transition足够快，但不要在页面加载时设置动画。

Answer 1

您可以在页面加载时运行 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 */

您可以做各种有趣的事情，例如在内容中滑动，或将注意力吸引到某个区域。

Here's what W3C has to say.