Question

适用于所有现代浏览器，Safari除外

这是一个非常罕见的情况，可能会出现 Safari 的故障。我正在使用JS动态地将 .highlighted 类添加到 fieldset 元素。

这是不寻常的部分......它开始卡在第一帧上，直到我在另一个元素上触发一个单独的动画（例如：按钮悬停webkit动画）。我试图直接通过CSS和JS调用播放状态。我花了一整天时间把头靠在墙上。

我也尝试过在基本风格上使用过渡属性，但没有运气。

CSS

footer form fieldset {
    position:relative;
    display:block;
    background:#000;
    width:80%;
    margin:0;
    padding:5px;        
    -moz-box-shadow: 0px 0px 1px #888;
    -webkit-box-shadow: 0px 0px 1px #888;
    box-shadow: 0px 0px 1px #888;
  }
  footer form fieldset.highlighted {
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state:running !important;
  }
  @-webkit-keyframes glow {
    0% { -webkit-box-shadow: 0 0 1px #888; }
    50% { -webkit-box-shadow: 0 0 15px #888; }
    100% { -webkit-box-shadow: 0 0 1px #888; }
  }

我也尝试过使用JS，将“webkitAnimationEnd”事件绑定到fieldset，然后设置播放状态（例子）：

document.getElementById('blah').style.webkitAnimationPlayState='running';

Answer 1

终于在最后一分钟弄清楚了！应用了冲突的CSS3过渡样式。删除后，立即开始工作。

经验教训，小心将CSS3过渡与WebKit关键帧动画混合。

.transition-med
{
   transition:all 0.5s ease;
   -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
}

WebKit动画已启动，但在第一帧冻结（仅限Safari）

1 个答案: