3

适用于所有现代浏览器，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”事件绑定到字段集，然后设置播放状态（示例）：

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

1 回答 1

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;
}
于 2012-10-02T04:23:32.993 回答