仅适用于Chrome的CSS动画

Question

我的css动画只适用于谷歌浏览器，任何帮助表示赞赏。

在其他浏览器，图片仅供降withouth的任何动画，它应该容易，弹跳和枢轴（SO 3动画）

EDIT下降：这是我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); } 
} 

的代码被触发上的特定的滚动位置：

$(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; 
    } 
} 

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