CODEWITHSUNDEEP
cssgoogle-chromefirefoxanimation
Mathieu Désilets
Mathieu Désilets

Reputation: 23

CSS animation only working in Chrome

my css animation only works in google Chrome, any help is appreciated.

In the other browsers, the picture only drop withouth any animation where it should drop with ease, bounce and pivot (so 3 animations)

EDIT: THIS IS MY NEW CODE

#divAnimQuille{
    width:330px;
    margin: 0 auto;
}

#quilleRouge {
    top:-388px;
    position:relative;
    display:block;
}

#quilleRouge.animate {
    display:block;
    position:relative;
    top:0px;

    -webkit-animation: dropQuilleRouge 0.3s ease, bounceQuilleRouge 1s, pivotQuilleRouge 1s 0.1s;
    animation-name: dropQuilleRouge 0.3s ease, bounceQuilleRouge 1s, pivotQuilleRouge 1s 0.1s;

    -webkit-transform-origin: top center;
    transform-origin: top center;
}

/*===============================================================================================*/

@-webkit-keyframes dropQuilleRouge {
    0%{
        top:-388px;
    }
    100%{
        top:0px;
    }
}

/*===============================================================================================*/

@-webkit-keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}

@keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}


/*===============================================================================================*/

@-webkit-keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(12deg); }   
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }    
    80% { -webkit-transform: rotate(-5deg); }   
    100% { -webkit-transform: rotate(0deg); }
}

@keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { transform: rotate(12deg); }   
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }    
    80% { transform: rotate(-5deg); }   
    100% { transform: rotate(0deg); }
}

OLD CODE:

#divAnimQuille{
    width:330px;
    margin: 0 auto;
}

#quilleRouge {
    top:-388px;
    position:relative;
    display:block;
}

#quilleRouge.animate {
    display:block;
    position:relative;
    top:0px;

    -webkit-animation: dropQuilleRouge 0.3s ease;
    -moz-animation-name: dropQuilleRouge 0.3s ease;
    -ms-animation-name: dropQuilleRouge 0.3s ease;
    -o-animation-name: dropQuilleRouge 0.3s ease;
    animation-name: dropQuilleRouge 0.3s ease;

    -webkit-animation:bounceQuilleRouge 1s;
    -moz-animation-name:bounceQuilleRouge 1s;
    -ms-animation-name:bounceQuilleRouge 1s;
    -o-animation-name:bounceQuilleRouge 1s;
    animation-name: bounceQuilleRouge 1s;

    -webkit-animation:pivotQuilleRouge 1s 0.1s; 
    -moz-animation-name:pivotQuilleRouge 1s 0.1s;
    -ms-animation-name:pivotQuilleRouge 1s 0.1s;
    -o-animation-name:pivotQuilleRouge 1s 0.1s;
    animation-name: pivotQuilleRouge 1s 0.1s;

    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    o-transform-origin: top center;
}

/*===============================================================================================*/

@-webkit-keyframes dropQuilleRouge {
    0%{
        top:-388px;
    }
    100%{
        top:0px;
    }
}


/*===============================================================================================*/

@-webkit-keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}

@-ms-keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
    40% {-ms-transform: translateY(-30px);}
    60% {-ms-transform: translateY(-15px);}
}

@-o-keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounceQuilleRouge {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}


/*===============================================================================================*/

@-webkit-keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(12deg); }   
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }    
    80% { -webkit-transform: rotate(-5deg); }   
    100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -moz-transform: rotate(12deg); }  
    40% { -moz-transform: rotate(-10deg); }
    60% { -moz-transform: rotate(5deg); }   
    80% { -moz-transform: rotate(-5deg); }  
    100% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -ms-transform: rotate(12deg); }   
    40% { -ms-transform: rotate(-10deg); }
    60% { -ms-transform: rotate(5deg); }    
    80% { -ms-transform: rotate(-5deg); }   
    100% { -ms-transform: rotate(0deg); }
}

@-o-keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -o-transform: rotate(12deg); }    
    40% { -o-transform: rotate(-10deg); }
    60% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-5deg); }    
    100% { -o-transform: rotate(0deg); }
}

@keyframes pivotQuilleRouge {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { transform: rotate(12deg); }   
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }    
    80% { transform: rotate(-5deg); }   
    100% { transform: rotate(0deg); }
}

The code is triggered on a certain scroll position:

$(window).scroll(function (event) {

var hauteurHeader = $('#header').height();

var y = $(this).scrollTop();

if (y >= hauteurHeader - 100) {
    $('#quilleRouge').addClass('animate');
}

});

Upvotes: 0

Views: 561

Answers (1)

easwee
easwee

Reputation: 15895

You forgot to specify the keyframes function for all browsers - not only for webkit:

@-webkit-keyframes dropQuilleRouge {
    0%{
        top:-388px;
    }
    100%{
        top:0px;
    }
}
@-moz-keyframes dropQuilleRouge {
    0%{
        top:-388px;
    }
    100%{
        top:0px;
    }
}
@-o-keyframes dropQuilleRouge {
    0%{
        top:-388px;
    }
    100%{
        top:0px;
    }
}
@keyframes dropQuilleRouge {
    0%{
        top:-388px;
    }
    100%{
        top:0px;
    }
}

Also - correct me on this if it changed, but as far as I know there is no @-ms-keyframes for IE, since older IE browser don't support keyframe animations, while IE10+ use standard css3 syntax.

Upvotes: 1

Related Questions