1

如何正确使用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 动画的一般提示。

编辑：是的，我是新手。

4

2 回答 2

1 
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}
于 2013-10-25T13:37:33.383 回答
0

您需要将其添加到您的 css 中：

@-webkit-keyframes fadeIn /* Safari and Chrome */
{
0%   {opacity:0;}
100%  {opacity:1;}
}
于 2013-10-25T14:05:17.093 回答