CSS 动画仅适用于 Chrome答案

【问题标题】：CSS animation only working in ChromeCSS 动画仅适用于 Chrome
【发布时间】：2014-02-18 23:40:51
【问题描述】：

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

});

【问题讨论】：

@-webkit-keyframes dropQuilleRouge 将仅适用于 webkit 浏览器，您正在尝试在所有浏览器上使用它。

标签： css google-chrome firefox animation

【解决方案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 语法。

【讨论】：

这并没有解决问题，drop 确实有效，但应该可以轻松解决。现在它只达到 100 %，没有任何动画，其他 2 个动画也不起作用。
你不需要@-moz-keyframes 和@-o-keyframes。 IE10+、FF 和 Opera 支持 @keyframes 而 Chrome 和 Safari 支持 webkit。 IE9及以下根本不支持。见这里W3School
@MathieuDésilets Remove '-name:' from '*-animation-name' 你在课堂上调用它 - 你有一个错字 - 将动画称为速记只使用'animation' - 而不是'动画名称'。
@snaplemouton 这些浏览器的旧版本不支持标准语法，因此您仍然需要它。没有它，一些移动浏览器也将无法工作。
@Mathieu Désilets，如果您使用的是 IE9 并且不支持它。只有 IE10+ 支持关键帧动画。