애니메이션 예제

stylus animation

코드

벽돌 4개가 위로 올라오는 애니메이션을 구현해보았다.

<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

ul  
  position: relative  
  top: 100px  
  li  
    for i in (1...5)  
      &:nth-child({i})  
      // animation-delay: pop .15s*items  
        animation: (heightsx- + i) .5s .2s*i 1 forwards       

        $keyframe-namex = (heightsx- + i)  
        @-webkit-keyframes {$keyframe-namex}  
          0%  
            transform: translateY(220px)  
          50%  
            opacity: 0.5  
            transform: translateY(200px)  
          100%  
            transform: translateY((-50*i)px)  
        @keyframes {$keyframe-namex}  
          0%  
            transform: translateY(220px)  
          50%  
            opacity: 0.5  
            transform: translateY(200px)  
          100%  
            transform: translateY((-50*i)px)  
    .item  
      display: inline-block  
      position: relative  
      transform: translateY(220px)  
      margin-right: 20px  
      width: 60px  
      height: 120px  
      background-color: #fff  
      opacity: 0.05  
      border-radius: 6pxul  

참고

• loop-in-css-stylus
• https://codepen.io