Question

如何正确使用animation.css？我用这种方式：

animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;

-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-o-animation-duration:1.5s;
animation-duration:1.5s;
}

.animated.hinge{
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-o-animation-duration:1.5s;
animation-duration:1.5s;
}


@-moz-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;

我通过点击链接将此动画称为动画。因此，内容应该像我的页面上的fadeIn，以便用户有一些很好的东西，直到内容存在。我在onclick事件中通过jQuery函数调用这个动画类。此功能如下所示：

  function getRightCol(){
               $('#right-col').addClass('fadeIn animated').removeClass('hidden');
                       window.setTimeout( function(){
                                   $('#right-col').addClass('shown fadeIn');},1000);
                            window.setTimeout( function(){
              $('#right-col').removeClass('fadeIn fadeOut animated');},1000);                         
    };

重点是，Firefox完美地完成了这个动画。除了立即显示内容外，Chrome和Safari不会执行任何操作。此外，我的脚本位于我的html页面的底部。如果你想查看页面及其目前的检查：wp.cloudstarter.de 那么，为什么它不适用于Chrome？我的错误在哪里？我也很欣赏使用css-animations的一般提示。

编辑：是的，我是新手。

Answer 1

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

Answer 2

您需要将此添加到您的css：

@-webkit-keyframes fadeIn /* Safari and Chrome */
{
0%   {opacity:0;}
100%  {opacity:1;}
}

如何正确使用css动画？

2 个答案: