加载时有css3过渡动画？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

您 可以 在页面加载时运行 动画，而无需使用任何JavaScript；您只需要使用 。

让我们看一个例子…

这是仅使用 的导航菜单滑入位置的演示：

@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 */

您可以做各种有趣的事情，例如滑动内容或吸引人们注意区域。

以上是 加载时有css3过渡动画？ 的全部内容， 来源链接： utcz.com/qa/401843.html

回到顶部