是否可以在不使用Javascript的情况下在页面加载时使用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;} <header> <a href="#">Home</a> <a href="#">About</a> <a href="#">Products</a> <a href="#">Contact</a> </header>
分解…
这里的重要部分是关键帧动画,我们称之为slideInFromLeft…
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 */
您可以做各种有趣的事情,例如滑动内容或吸引人们注意区域。