SASS (not SCSS) syntax for css3 keyframe animation

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)

SASS (not SCSS) syntax for css3 keyframe animation

Related

Recent Posts