WebKit 动画开始，但在第一帧上冻结(仅限 Safari)

Question

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

这是一个非常罕见的情况，并且Safari可能会出现故障。我正在使用 JS 将 .highlight 类动态添加到字段集元素中。

这是不寻常的部分......它开始卡在第一帧上，直到我在不同的元素上触发一个单独的动画（例如：按钮悬停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"事件绑定到字段集，然后设置播放状态（示例）：

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;
}