異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用

アニメーション

Gist

 状態:確認中  閲覧数:2,049  投稿日:2015-01-10  更新日:2015-01-13
異なる角度の「transform:rotate」を連続実施する方法が不明
・「同じプロパティの違った値」を複数設定不可

@keyframes
・この問題を解決するためには、@keyframesの理解が必要

現状
・@keyframes が理解できなかったけど、理解できそうな気も…

分かったかも!
「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない

異なる角度の「transform:rotate」を連続実施したい

 閲覧数:474 投稿日:2015-01-08 更新日:2015-01-15

やりたいこと


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を使用

 閲覧数:510 投稿日:2015-01-08 更新日:2015-01-13

キーフレームアニメーション


構文
@keyframes 任意のキーフレーム名

アニメーション
・キーフレームアニメーション

@keyframes
・@keyframes ルール
・アニメーション定義ルール
・これを使用することでアニメーションの流れを指定することが可能
・具体的には、「アニメーション開始から終了まで」の「さまざまな段階」で 「CSS プロパティが持つ値」を指定可能

「CSSアニメーションのブラウザ間差異」を完全に理解できない

 閲覧数:521 投稿日:2015-01-10 更新日:2015-01-17

ブラウザ間差異


複雑な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%思い通りの動作にすることが出来ない

何れにしても…
・ブラウザ差異とか、もう止めて
・分かんないから!



SVG線を徐々に描画していくためには、@keyframes を利用

「CSSキーフレームアニメーション」実行後のCSS設定



類似度ページランキング
順位 ページタイトル抜粋
1 異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用 70
2 SVG線を徐々に描画していくためには、@keyframes を利用 43
3 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 39
4 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 38
5 ページ内リンクの位置を微調整するためには、Negative margin を使用する 37
6 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 36
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 35
8 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 35
9 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 35
10 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 33
11 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 32
12 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 31
13 SVGの色指定は、「枠線 stroke」と「内部 fill」の2種類 31
14 Bookmark Sentry 31
15 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 31
16 「position:fixed;」指定した要素を中央寄せするためには、「left:50%;transform:translateX(-50%);」を追記します。 31
17 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 31
18 max-width: 100%の効果を打ち消すには、max-width: none; 30
19 縦中央配置するには、親要素に2行追加。display: flex; align-items: center; 30
20 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 30
2024/3/29 0:40 更新