我试图用一个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);
}
}
发布于 2016-11-28 22:38:11
查看此处> jsfiddle
您必须设置一个更大的animation-delay
,这样才能看到li
一个接一个地出现。
您必须将opacity:0
与animation-fill-more:forwards
一起设置,这样一开始,li
会隐藏起来,然后它们会出现并保留在opacity:1
中
如果这就是你要找的,请告诉我
代码:
(代码片段不起作用,因为它没有SASS;我只是把它放在网站上的代码可见的地方)
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;
opacity:0;
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation: slideTop;
animation-duration: 1s + ($i*400ms);
animation-iteration-count: 1;
animation-delay: 2.5s + ($i*400ms);
animation-fill-mode:forwards;
}
}
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);
}
}
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="Labs">Labs</a></li>
</ul>
https://stackoverflow.com/questions/40845209
复制相似问题