CODEWITHSUNDEEP
csssasskeyframe
daviestar
daviestar

Reputation: 4641

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.

Upvotes: 78

Views: 78892

Answers (2)

KrystianKasp98
KrystianKasp98

Reputation: 41

Create keyframes like so:

@keyframes name
  0%
    transform: scale(1)
  50%
    transform: scale(1.5)
  100%
    transform: scale(1)

then use

.example-btn
  animation: name 2s linear infinite

If you store keyframes in other .sass file, you just need import this file(with keyframes) and everything will work good.

Upvotes: 2

daviestar
daviestar

Reputation: 4641

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)

Upvotes: 126

Related Questions