CSS 动画仅适用于 Chrome

Question

我的 css 动画只能在谷歌浏览器中使用，感谢任何帮助。

在其他浏览器中，图片只掉落而没有任何动画，它应该轻松掉落、弹跳和旋转(所以 3 个动画)

编辑:这是我的新代码

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

旧代码:

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

代码在某个滚动位置触发:

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

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

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

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

});

Answer 1

您忘记为所有浏览器指定关键帧功能 - 不仅仅是 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;
    }
}

另外 - 如果它改变了请纠正我，但据我所知，IE 没有@-ms-keyframes，因为旧的 IE 浏览器不支持关键帧动画，而 IE10+ 使用标准的 css3 语法。