Sass (Not SCSS) Syntax for CSS3 Keyframe Animation

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)

Not able to access the animate.css's animation keyframe names from scss file

Since the bounceIn animation is declared globally (i.e. imported from animate.css in your globals.scss), you have to use the :global selector when using it in your Sass Modules file. Otherwise, Sass Modules assumes bounceIn is locally scoped and will hash the animation name.

.animateText :global {
    display: inline-block;
    animation-name: bounceIn;
    animation-duration: 2s
}

/* or */

.animateText {
    display: inline-block;
    animation-duration: 2s
    &:global {
        animation-name: bounceIn;
    }
}

By default, CSS Modules assumes everything is locally scoped. If you want to access anything that's globally scoped you have to use :global.

how to compile scss with keyframes

The problem in your code is your scss syntax, no need to mention before after in keyframes, as you already applied the animation on same.

Make it correct like this.

@keyframes openbt {
    from {
        content: '\f0c9';
    }
    to {
        content: '\e804';
    }
}

@keyframes closebt {
    from {
        content: '\f0c9';
    }
    to {
        content: '\e804';
    }
}

.openbt{
    &:before {
        animation: openbt 2s;
        content: '\e804';
    }
}

.closebt{
    &:before {
        animation: closebt 2s;
        content: '\f0c9';
    }
}

Chek this running Example

@-webkit-keyframes changeLetter {  0% {    content: "1";  }  100% {    content: "2";  }}@keyframes changeLetter {  0% {    content: "1";  }  100% {    content: "2";  }}.element {  display: -webkit-box;  display: flex;  -webkit-box-align: center;          align-items: center;  -webkit-box-pack: center;          justify-content: center;  min-height: 100vh;}.element:after {  -webkit-animation: changeLetter 3s linear infinite alternate;          animation: changeLetter 3s linear infinite alternate;  display: block;  content: "A";  font-size: 80px;}

<div class="element"></div>

SASS animation (not SCSS) is not working

You can use Sass convert https://www.npmjs.com/package/sass-convert to convert from and to the different formats (scss, sass, css) so you can convert scss working file to sass and compare with the one you wrote to check what is wrong.

Looking at it and if you are saying it works with scss which uses {} to limit the rules it can be a indenting problem with your keyframes rules:

@keyframes spinner-loading
 0%
   transform: rotateZ(0deg)
 100%
   transform: rotateZ(359deg) 

.spinner
 margin-top: 20%
 margin-left: 30%
 height: 30%
 width: 30%
 animation: spinner-loading 1.5s linear infinite

.-ring1 
 fill: white

.-ring2 
 fill: rgba(white, 0.2)

How to create a nested array in SASS, not SCSS

With SASS, you need to write maps on a single line:

$clr: (prim: (step1: #8ef99e, step2: #76f789, step3: #5ef674, step4: #46f460, step5: #2ef34b, step6: #0de12c, step7: #0cc927, step8: #0ab123, step9: #09991e, step10: #078119, step11: #066814), light: (step1: #ffffff, step2: #f7f7f7, step3: #f0f0f0, step4: #e8e8e8, step5: #e0e0e0, step6: #d9d9d9))

Using @each to shorten @keyframe prefixes mixing in SCSS

Interpolation within name's directives is not allowed. You can find this issue opened. You have to use the large version until it is solved.

@mixin keyframes($name) {    
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

BTW, you were missing the final }.

Issue mixing variable with mixin with keyframe animation?

You called your mixin in a wrong way:

@keyframes dropdown {
  from { @mixin slider-clip($slider-initial); }
  to { @mixin slider-clip($slider-final); }
}

In the guide on sass-lang.com, you can see the following example of how to include a mixin:

.box { @include border-radius(10px); }

Applied to your case, your code should look like this:

@keyframes dropdown {
  from { @include slider-clip($slider-inital); }
  to { @include slider-clip($slider-final); }
}

---

Related Topics