<分区>
<分区>
我的问题并不是关于如何制作在页面加载时触发的动画,而是关于最佳方式。这至少意味着:
-响应式。
-SEO 友好。
-无闪烁。
通常我会创建一个未激活的 .hidden
或 .offpage
状态(以防没有 javascript 工作)。然后,当页面加载时,javascript 添加一个类来隐藏它们而无需转换,然后通过转换反转状态。
这个方法可以改进吗?
最佳答案
您不需要任何 Javascript 来制作动画。您可以简单地使用 CSS3。
header {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 10px;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.3s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.3s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.3s;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
display: inline-block;
margin-right: 20px
}
@-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-40px);
}
100% {
-moz-transform: translateY(0);
}
}
@-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes dropHeader {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
/* Added for aesthetics */
body {
margin: 0;
font: normal 14px"Segoe UI", Arial, Helvetica, Sans Serif;
}
a {
color: #eee;
text-decoration: none;
}
<header>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Products</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</header>
关于javascript - 在页面加载动画上制作 css 的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30304837/