CODEWITHSUNDEEP
loopssasscss-animations
thomtheetoad
thomtheetoad

Reputation: 105

Can I loop this keyframes animation somehow with Sass?

I have a client who wants this exact keyframes animation to be migrated from their old website, except we want it to infinitely loop. I know that I can create a brand new slideshow from a JS array, but I was wondering if a preprocessor like Sass would enable me to just loop this thing the way it is. I appreciate any input.

    @keyframes slidySlidesFadeInOut {
       0% {
        opacity:1;
      }
      8% {
        opacity:1;
      }
      25% {
        opacity:0;
      }
      92% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    #slidySlides {
      position:relative;
      height:301px;
      width:318px;
      margin:0 auto;
    }
    
    #slidySlides img {
      position:absolute;          
      animation-name: slidySlidesFadeInOut;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-duration: 180s;
    }
    
    #slidySlides img:nth-of-type(1) {
      
      animation-delay: 150s;
    }
    #slidySlides img:nth-of-type(2) {
      
      animation-delay: 120s;
    }
    #slidySlides img:nth-of-type(3) {
      
      animation-delay: 90s;
    }
    #slidySlides img:nth-of-type(4) {
      
      animation-delay: 50s;
    }
    #slidySlides img:nth-of-type(5) {
    animation-delay: 15s;
    }
    #slidySlides img:nth-of-type(6) {
      animation-delay: 0;
    }

Upvotes: 0

Views: 262

Answers (1)

Priyank Trivedi
Priyank Trivedi

Reputation: 276

If you just want the animation to loop add this to style:

animation-iteration-count:infinite;

Or replace the animation name with:

  animation: slidySlidesFadeInOut 180s infinite;

And this does not require SASS, although it is completely valid in SASS.

Upvotes: 2

Related Questions