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