Keyframe animations with SCSS not working

Question

I'm new to keyframe animations and after some searching this article seemed like a good place to start.

Here is the articles code in codepen - http://codepen.io/anon/pen/yYPxJM

@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');
}

However, it doesn't work "as is" and I'm not sure how to proceed.

I'm going to be animating objects as I scroll down the page. For example animating the some to fade-in, others to scale (call to action) to make them pop. The jQuery shouldn't be an issue, it's these animations that are causing me the issues.

Would love some help to understand what I'm failing to do right.

Thanks in advance!

Signal

Answer 1

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');
}

Dolabriform

@Signal Happy to help! – Dolabriform

This was very goooooood. Thanks – Macario

Answer 2

i usually use a mixin like so:

@mixin key_frame($name: "default_anim", $duration: 333ms, $count: infinit) {
    @keyframes default_anim {
        0% {
            bottom: -7px;
        }
        100% {
            bottom: 0;
        }
    }

    @keyframes other_anim {
        0% {
            bottom: -20px;
        }
        100% {
            bottom: 0;
        }
    }

    animation-name: $name;
    animation-duration: $duration;
    animation-iteration-count: $count;
}

and then i include them:

element{
   ...
   @include key_frame(your choices);
}

Vermeil