SASS Tile Rotate animation effect

SASS Tile Rotate animation

Here we use a SASS (SCSS) for loop to build a rotate animation of three tiles. We rotate each tile with animation-delay and the #sass:for loop delayed by one second each.

@for $i from 1 through 3 { .tile-rotate:nth-child(#{$i}) { animation-delay: #{$i}s; } }
    Hints:
  • If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
  • Remove the HTML style tag as needed.
  • Change values in the code such as animation-duration as needed.
Animation effects source code licenced under MIT Licence