Scss Function for Animation Keyframes

how to use scss function or mxin to generate key frame animation

I found here an interesting situation where first you create an animation with a keyframe mixin and then you use another mixin to include that animation (see 4. Animations and keyframes).

However, if you don't want to include 2 mixins because you want to save yourself some writing, another idea could be to create all keyframe animations you need using a simple map loop:

$colors:(
 "green": limegreen,
 "black": black,
 "white": white /*here you can add all colors you need*/
);

@each $name, $color in $colors {
  @keyframes #{$name} {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba($color, 0.4);
    box-shadow: 0 0 0 0 rgba($color, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 12px rgba($color, 0);
      box-shadow: 0 0 0 12px rgba($color, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba($color, 0);
      box-shadow: 0 0 0 0 rgba($color, 0);
    }
  }
}

.my-element {
  animation: green 2s infinite;
}

Sass Mixin for animation keyframe which includes multiple stages and transform property

To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.

Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins.
Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.

So, in your case, you just need to write this:

@keyframes crank-up {
  20%,
  40% { -webkit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

And autoprefixer converts it automatically to:

@-webkit-keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

Autoprefixer is widely supported, you can process your scss or css styles with this tool through Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...

Here is more info about the project

Sass reusable keyframes with mixins and functions

use interpolation to use $name like

@keyframes #{$name}

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>

Can we use something like ampersand for animation keyframe name?

If it's just about having a unique name for the keyframe, then you can use the unique-id function:

string.unique-id()
unique-id() //=> string 
Returns a randomly-generated unquoted string that’s guaranteed to be a valid CSS identifier and to be unique within the current Sass compilation.

Your example would look the following:

@use "sass:string";

.class {
    $keyframesName: string.unique-id();
    animation: $keyframesName 10s;
    @keyframes #{$keyframesName} {
        0% {}
        100% {}
    }
}

Or using the discouraged global alias:

.class {
    $keyframesName: unique-id();
    animation: $keyframesName 10s;
    @keyframes #{$keyframesName} {
        0% {}
        100% {}
    }
}

Example result:

.class {
  animation: uw4m92d 10s;
}
@keyframes uw4m92d {}

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.

Create a SASS mixin for animation

You can add mixin somewhere in the top of .sass file just before it is been called. Or you can include it from the external file.

@mixin animation-mixin($name, $from, $to) {
  @keyframes #{$name} {
    0% {transform: translate3d($from, 0, 0); opacity: 0;}
    100% {transform: translate3d($to, 0, 0); opacity: 1;}
  }
}

Call the mixin and pass these 3 values $name, $from, $to like this:

@include animation-mixin(slide-1, 0, 100%);
@include animation-mixin(slide-2, 0, 200%);

And it would be translated into this:

@keyframes slide-1 {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}
@keyframes slide-2 {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(200%, 0, 0);
    opacity: 1;
  }
}

DEMO

HTML

<div class="box-1"></div>
<div class="box-2"></div>

SASS

.box-1,
.box-2 {
  height: 20px;
  width: 20px;
  margin: 5px;
}
.box-1 {
  background-color: blue;
  animation: slide-1 2s ease infinite;
}
.box-2 {
  background-color: red;
  animation: slide-2 2s ease infinite;
}

@mixin animation-mixin($name, $from, $to) {
  @keyframes #{$name} {
    0% {transform: translate3d($from, 0, 0); opacity: 0;}
    100% {transform: translate3d($to, 0, 0); opacity: 1;}
  }
}

@include animation-mixin(slide-1, 0, 100%);
@include animation-mixin(slide-2, 0, 200%);

Keyframe animations with SCSS not working

You have to use Interpolation: #{}, so your $animation-name is not treated as CSS.

Here's my favorite article on the matter: All You Ever Need to Know About Sass Interpolation

Please, have a look at the code:

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

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}