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

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

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

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

---

最后一分钟终于弄明白了！应用了冲突的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;
}

---

或者更好的方法是，不要在过渡中使用“all”属性，而是使用更具体的属性，如“opacity”或“width”。见：

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