javascript - 如何正确使用css animate？

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;

我通过单击链接来调用此动画。因此，内容应该像我页面上的淡入一样，以便用户在内容出现之前有一些好看的东西。我通过 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 动画的一般技巧。

编辑:是的，我是新手。

Answer 1

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