我试图用一个for循环在Sass中创建一个关键帧动画,但我在编写它时遇到了困难。我想要的是让每个单独的项目一个接一个地出现,但有一个小小的延迟。有点像一堆纸牌。
这是一个codepen。代码如下:
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="Labs">Labs</a></li>
</ul>
html {
font-size: 62.5%;
box-zising: border-box;
}
*,
*:before,
*:after {
box-zising: inherit;
}
html, body {
width: 100vw;
height: 100vh;
background: black;
font-size: 1rem;
}
ul {
position: fixed;
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px solid white;
width: 100vw;
height: 100vh;
}
li {
list-style: none;
border: 1px solid white;
width: 100%;
text-align: center;
margin-top: 10px;
background: red;
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
animation: slideTop;
animation-duration: 1.5s + (40ms * $i);
animation-iteration-count: 5;
animation-delay: 2.5s + (40ms * $i);
}
}
a {
display: block;
padding: 50px;
color: white;
font-size: 24px;
text-decoration: none;
letter-spacing: 0.1em;
}
}
@keyframes slideTop {
0% {
opacity: 0;
transform: scaleY(0);
}
100% {
opacity: 1;
transform: scaleY(50px);
}
}
https://stackoverflow.com/questions/40845209
复制相似问题