D_S D_S - 11 days ago 5
Sass (Sass) Question

Triggering a list with CSS3 animations and Sass @for loop

Hey guys I'm trying to create a keyframe animation in Sass with a for loop, but I'm stumbling on the writing of it. What I would like is have each single item to appear one after the other but with a minor delay. Sort of like a stacking of cards. Thanks in advance

Here is a codepen. Here is the code:



<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);
}
}

Answer

see here > jsfiddle

you have to set a much bigger animation-delay so you can see that the lis appear one after the other

and you have to set opacity:0 together with animation-fill-more:forwards so at first the lis are hidden and then they appear and stay with opacity:1

let me know if this is what you were looking for

CODE :

( snippet not working because it doesn't have SASS; i've only put it so that the code is visible here on the site )

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>