Gist
状態:確認中
閲覧数:2,211
投稿日:2015-01-10
更新日:2015-01-13
異なる角度の「transform:rotate」を連続実施する方法が不明
・「同じプロパティの違った値」を複数設定不可
@keyframes
・この問題を解決するためには、@keyframesの理解が必要
現状
・@keyframes が理解できなかったけど、理解できそうな気も…
分かったかも！
→「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない
・「同じプロパティの違った値」を複数設定不可
@keyframes
・この問題を解決するためには、@keyframesの理解が必要
現状
・@keyframes が理解できなかったけど、理解できそうな気も…
分かったかも！
→「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない
異なる角度の「transform:rotate」を連続実施したい
やりたいこと
transform:rotate初期値を設定したい
・マウスオーバーした際、transform:rotate初期値-180deg状態からスタート
・180degで終了
挑戦
色々実装してみるも
・全く意図通り動作しない
「transform:rotate」複数指定は不可
・scaleなど異なる値との併用は可能だが、「rotate」を「transform」に複数指定することは出来ない
失敗例
・適当にコーディングしても、動作するわけがない
transform:rotate(-180deg) scale(1.2) rotate(180deg);
・「:before」「:after」を勝手に組み合わせても、もちろん駄目
img:hover:before{
transform:rotate(-180deg);
}
img:hover:after{
transform:rotate(180deg);
}
解決するためには
・@keyframes理解が必要
ブラウザ実装状況
・keyframes
問題を解決するために、@keyframesを使用
「CSSアニメーションのブラウザ間差異」を完全に理解できない
ブラウザ間差異
複雑な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％思い通りの動作にすることが出来ない
何れにしても…
・ブラウザ差異とか、もう止めて
・分かんないから！