CSS3 动画迭代计数 1 与无限 chrome 兼容性
CSS3 animation iteration count 1 vs infinite chrome compatibility
好的。我试图搜索这个问题。这很简单。我有一个 css 摇摆动画在 firefox 中运行良好,但在 chrome 中却不行。当然,我加了webkit前缀。但仍然没有运气。我将迭代计数更改为无限,最后它开始工作了,但不,我不希望它无限地 运行。这真的是一个错误吗?有人找到解决方案吗?这是我在 jsfiddle 中编写的代码的 link .. http://jsfiddle.net/7t1uvyup/2/ 这是实际代码。
.x{
height:50px;
width:50px;
background:#000;
position:fixed;
}
.x:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
/* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<div class="x"></div>
我做了一些研究..CSS 是硬件加速的..
所以这不仅仅是一个奇怪的随机错误。
我运行刚刚进入这个问题。对我来说,动画似乎是在很短的时间内发生的,很多时候人眼都不会注意到;即,当 webkit-animation-iteration-count 不是无限时,Chrome 不考虑动画持续时间参数。
对我来说,这似乎不是 运行dom 错误。它可以可靠地重现。
尝试使用不同的浏览器访问 http://www.w3schools.com/css/css3_animations.asp。 Chrome表示最差的表现; CSS3 动画框没有动画;它只是停留。
好的。我试图搜索这个问题。这很简单。我有一个 css 摇摆动画在 firefox 中运行良好,但在 chrome 中却不行。当然,我加了webkit前缀。但仍然没有运气。我将迭代计数更改为无限,最后它开始工作了,但不,我不希望它无限地 运行。这真的是一个错误吗?有人找到解决方案吗?这是我在 jsfiddle 中编写的代码的 link .. http://jsfiddle.net/7t1uvyup/2/ 这是实际代码。
.x{
height:50px;
width:50px;
background:#000;
position:fixed;
}
.x:hover
{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
/* change webkit iteration count to infinite and it will work on chrome but of course with infinite animation */
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
<div class="x"></div>
我做了一些研究..CSS 是硬件加速的..
所以这不仅仅是一个奇怪的随机错误。
我运行刚刚进入这个问题。对我来说,动画似乎是在很短的时间内发生的,很多时候人眼都不会注意到;即,当 webkit-animation-iteration-count 不是无限时,Chrome 不考虑动画持续时间参数。
对我来说,这似乎不是 运行dom 错误。它可以可靠地重现。
尝试使用不同的浏览器访问 http://www.w3schools.com/css/css3_animations.asp。 Chrome表示最差的表现; CSS3 动画框没有动画;它只是停留。