Menu
Is there any way to write keyframes in SASS?
Every example I have found is actually SCSS, even when it says it's SASS. To be clear, I mean the one with no curly brackets.
502
You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation.
SASS supports two syntaxes namely SCSS and Indented syntax. The SCSS (Sassy CSS) is an extension of CSS syntax. This means every valid CSS is a valid SCSS as well. SCSS makes much easier to maintain large stylesheets and can recognize vendor specific syntax, Many CSS and SCSS files use the extension .
Definition and Usage The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
Here is how you implement css keyframes in the Sass syntax:
@keyframes name-of-animation 0% transform: rotate(0deg) 100% transform: rotate(360deg) Here is a Sass mixin to add vendor prefixes:
=keyframes($name) @-webkit-keyframes #{$name} @content @-moz-keyframes #{$name} @content @-ms-keyframes #{$name} @content @keyframes #{$name} @content Here's how to use the mixin in Sass syntax:
+keyframes(name-of-animation) 0% transform: rotate(0deg) 100% transform: rotate(360deg) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With