CSS动画仅在Chrome中工作

我的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');
}

---

}))

您忘记为所有浏览器指定keyframes函数-不仅仅是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关键帧，因为旧版IE浏览器不支持关键帧动画，而IE10+使用标准css3语法。

@-webkit keyframes DropquillerRouge

将只应用于webkit浏览器，您正在尝试在所有浏览器上使用它。这并没有修复它，滴水确实管用，但应该有一个轻松的过程。现在它只有100%没有任何动画，另外两个动画也不起作用。你不需要@moz关键帧和@o关键帧。IE10+、FF和Opera支持@keyframes，而Chrome和Safari支持webkit。IE9及以下版本根本不支持它。请参见此处@MathieuDésilets Remove'-name:“from'*-animation name”，您在课堂上调用它-您有一个拼写错误-将动画称为速记，只使用“animation”-而不是“animation name”。@snaplemouton这些浏览器的旧版本不支持标准语法，因此您仍然需要它。还有一些移动浏览器没有它也无法工作。@Mathieu Désilets，如果您使用的是IE9，那么它是不受支持的。只有IE10+支持关键帧动画。