csssasskeyframe

SASS (not SCSS) syntax for css3 keyframe animation

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.

Solution

  • 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)