CODEWITHSUNDEEP
jqueryhtmlcssanimation
mariocatch
mariocatch

Reputation: 8683

Trouble with animation in non-chrome browsers

I have some jQuery that is successfully adding the needed class for the animation below.

1) First, the animation below is only playing in Chrome. My IE (version 11.0) and Firefox (32.0.3) are not playing the animation at all.

2) Second, if I don't have 'opacity: 1;' in my animation class, the element will fade back to opacity 0 (its original value). Is there a better way to have it stay at the final value of an animation without having to set it in the animation? Seems kind of non-intuitive to be setting properties of the element in the animation class, as it's not clear when it takes effect (before, after the keyframe).

HTML:

<!-- Appear after 1 second -->
<h1 data-appear='1'>1</h1>

CSS:

h1 {
    opacity: 0;
}

@-webkit-keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}

.appear.delay1 {
    animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation: appear;
    -o-animation-name: appear;
    -moz-animation-name: appear;
    -webkit-animation-name: appear;

    opacity: 1;
}

Upvotes: 0

Views: 46

Answers (1)

Hless
Hless

Reputation: 3316

1.) The secret lies within the order of the CSS rules. You have not defined an animation yet when you define the duration. If I switch the order it works for me in the latest firefox:

.appear.delay1{

    animation: appear;
    -o-animation: appear;
    -moz-animation: appear;
    -webkit-animation: appear;

    animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

2.) You don't need to define opacity if you define the fill mode. With fill mode you can specify what state of the animation will stick when the animation is complete. In this case you want 100% to stick, so you should set the fill mode to forwards.

-o-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

I pieced it all together in the following fiddle:

http://jsfiddle.net/mxa377m4/

Upvotes: 2

Related Questions