CODEWITHSUNDEEP
jquerycssanimationkeyframe
dcpomfret
dcpomfret

Reputation: 115

Keyframe animations with SCSS not working

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!

Upvotes: 10

Views: 27432

Answers (2)

mod7ex
mod7ex

Reputation: 948

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

Upvotes: 0

halfzebra
halfzebra

Reputation: 6807

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

Upvotes: 24

Related Questions