カテゴリー:
アニメーション
閲覧数:784 配信日:2015-01-10 12:44
ブラウザ間差異
複雑なCSSアニメーション
・単純なCSSアニメーションではどのブラウザでも同じ挙動をするのに、ちょっと複雑な記述をすると、途端にブラウザ間差異が発生
原因の切り分けが出来ない
・取り組み初めて今日で8日目になるが、未だに法則性が掴めない
・何と何の組み合わせによって問題が発生しているのかを特定できない
現状の問題
FireFox
・マウスアウト処理用にtransition処理を記述すると、FireFoxのみ、マウスオーバー時の回転処理が「animation-iteration-count:1;」と記述しているにも関わらず1回で終了しない
・この記述をコメントアウトすると、他ブラウザと同じ挙動になる
.ターゲットクラス img {
/* transition プロパティの指定 */
transition: all 5.5s ease-in-out;
}InternetExplorer
・マウスオーバー時の回転処理時に、imgタグのtitle属性に記述した内容がチラついて表示され、物凄くウザい
・解決方法不明
・IEのみ「imgタグのtitle属性」を非表示にするしかない？
環境
Chrome
・39.0.2171.95 m
Firefox
・34.0.5
Internet Explorer
・11.0.15
調査履歴
アニメーション名から二重引用符を削除する（ "rotate" ではなく、rotate）
・キーフレームアニメーション名に二重引用符は使用していない
Remember, the non-prefixed properties must always be the last, after the vendor specific.
・ベンダープレフィクスを付与していないプロパティは、最後に記述している
・CSS3のキーフレームアニメーションは、FirefoxとIEで動作しない
感想
90％
・見よう見まねでも、90％ぐらいの完成度まではたどり着く
・問題はそこから
・100％思い通りの動作にすることが出来ない
何れにしても…
・ブラウザ差異とか、もう止めて
・分かんないから！