僅適用於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語法。