CODEWITHSUNDEEP
htmlcss
rshah
rshah

Reputation: 691

Why is my animation not playing?

I've followed a short tutorial to create a bouncing arrow however the code I've used it pretty much the same excluding small differences.

However, when I add it to my hero unit, it doesn't play my animation.

It could be the transform or keyframe mixins I used...

Here is the JSFiddle: http://jsfiddle.net/x9hxfusa/

Upvotes: 3

Views: 91

Answers (3)

Fabrizio
Fabrizio

Reputation: 63

You must declare

@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}

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

before include keyframes and transform. You must also set the bounce class in a different way (remove ''):

.bounce {
  @include animation(bounce 2s infinite);
}

http://jsfiddle.net/uth333cg/

Upvotes: 0

Oriol
Oriol

Reputation: 12650

Place the keyframes & mixins declarations at the top. You have to declare them before calling them.

See Demo

Upvotes: 1

AGE
AGE

Reputation: 3792

I tweaked and simplified your code, I think you can arrange the animation itself to be smoother, up to your liking. Remember to add cross browser support or at least use SCSS to manage it: jsFiddle

CSS

body { background-color: black; }

.arrow {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
    background-size: contain;
}

.bounce {
  -webkit-animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
    0%       { bottom:5px; }
    25%, 75% { bottom:15px; }
    50%      { bottom:20px; }
    100%     { bottom:0; }
}

I also think the key issue is with the mixins, however I stirred away from it to find a simpler solution for you.

Edit: I tried doing the following initially but I missed refreshing my jsFiddle and missed the obvious solution, which is now highlighted by @Oriol. Anyways, the issue is that your keyframe & mixin code is being positioned after the animation code (or at the top of your CSS for simplicity's sake). If you wish to keep your code as is just do that, or you can try my simplified solution.

Upvotes: 0

Related Questions