css3过度动画网页加载中,加载css3过渡动画？

狐的传说

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

  Home

  About

  Products

  Contact分解......这里的重要部分是关键帧动画，我们称之为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所说的。