3

Safari を除くすべての最新のブラウザで動作します

これは非常にまれな状況であり、Safariで問題が発生する可能性があります。.highlightedクラスを JS で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 に答える