CSS Animation未在基于Webkit的浏览器中运行

时间：2014-12-02 07:30:33

标签： html css css3 webkit css-animations

我希望将一个图像与另一个图像切换，反之亦然，并延迟一段时间。这在Chrome和Safari等Webkit浏览器中不起作用。

这就是我正在做的事情：

＆＃13;
＆＃13; 
.bkgd_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.top {
  animation-name: toggle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}
@keyframes toggle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
＆＃13; 
<img class="bottom bkgd_img" src="http://www.placehold.it/500/FF0000" />
<img class="top bkgd_img" src="http://www.placehold.it/500/FF9900" />
＆＃13;
＆＃13;
＆＃13;

我遇到的问题是＆＃34; top＆＃34;图像永远不会变得透明，动画不会发生。我哪里错了？

5 个答案:

答案 0 :(得分：2)

我是否需要在基于Webkit的浏览器中使用CSS3 Animation的浏览器前缀？

是的，目前仍然需要-webkit-前缀。

查看this reference here - 目前Chrome，Safari和Opera需要-webkit-前缀才能支持关键帧动画。

给未来读者的说明 - 随着浏览器供应商调整原生动画属性，这将在未来发生变化。确保未使用前缀的动画属性在 webkit前缀下。

完整示例

注意：非前缀属性应放在 -webkit-前缀下面。这可确保支持的浏览器将使用本机CSS属性。

动画属性已压缩为一个：animation: toggle 5s ease-in-out infinite alternate 

.bkgd_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.top {
  -webkit-animation: toggle 5s ease-in-out infinite alternate;
  animation: toggle 5s ease-in-out infinite alternate;
}
@-webkit-keyframes toggle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes toggle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<img class="bottom bkgd_img" src="http://www.placehold.it/500/FF0000" />
<img class="top bkgd_img" src="http://www.placehold.it/500/FFFF00" />

答案 1 :(得分：1)

如果您想以简单的方式使用JQuery。还有其他方法可以做到这一点：toggle()

HTML：

<img class="bottom bkgd_img" src="xyz.jpg" id="img-change" />

JQuery的：

$('#img-change').on({
'click': function () {
    var originalsrc = $(this).attr('src');
    var src = '';
    if (originalsrc == 'xyz.jpg') src = 'abc.jpg';
    if (originalsrc == 'abc.jpg') src = 'xyz.jpg';
    $(this).attr('src', src);
}

}）;

注意：我没有尝试过，但它可能有效。

答案 2 :(得分：1)

在Firefox 32和IE10以及Chrome 36中测试了您的代码。它似乎可以与IE和Mozilla一起使用。但是对于chrome来说效果不佳。 Chrome有不同的CSS符号，无法读取它们，请使用以下代码进行Chrome操作。您可以保留以前的其他浏览器代码

    .top {
        -webkit-animation-name:toggle;
        animation-name: toggle;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        -webkit-animation-direction: alternate;
    }

    @-webkit-keyframes toggle {
        0% {
            opacity:1;
        }
        45% {
            opacity:1;
        }
        55% {
            opacity:0;
        }
        100% {
            opacity:0;
}
}

答案 3 :(得分：1)

您错过了供应商特定的css属性。

-webkit-animation: toggle 5s infinite; 

@-webkit-keyframes toggle {}

参考工作代码。 http://codepen.io/bhuvana/pen/dPYzdZ

答案 4 :(得分：0)

您必须使用特定于供应商的代码，您可以在下面的代码中进行检查

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        .bkgd_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

}
.top {
    -webkit-animation: 5s 'toggle' infinite alternate;
    -moz-animation: 5s 'toggle' infinite alternate;
    -o-animation: 5s 'toggle' infinite alternate;
    animation: 5s 'toggle' infinite alternate;
}
@keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-webkit-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-moz-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}@-o-keyframes 'toggle' {
   0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

    </style>
</head>
<body>
    <img class="bottom bkgd_img" src="xyz.jpg" />
    <img class="top bkgd_img" src="abc.jpg" />
</body>
</html>
相关问题
最新问题