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

アニメーション

Gist

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

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

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

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

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

 閲覧数:262 投稿日: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を使用

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

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


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

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

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

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

 閲覧数:311 投稿日: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 SVG線を徐々に描画していくためには、@keyframes を利用 43
2 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 39
3 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 38
4 ページ内リンクの位置を微調整するためには、Negative margin を使用する 37
5 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 36
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 35
7 「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法 35
8 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 33
9 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 32
10 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 31
11 Bookmark Sentry 31
12 max-width: 100%の効果を打ち消すには、max-width: none; 30
13 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 30
14 縦中央配置するには、親要素に2行追加。display: flex; align-items: center; 30
15 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 30
16 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 30
17 font-familyには游ゴシックを指定しない 30
18 ページで使用されている「id名」「class名」をChromeで取得したい   29
19 「position:absolute;」が分からなくなったときに見るエントリー 29
20 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 29
2021/8/02 8:17 更新
週間人気ページランキング / 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
2 RGB ⇔ Lab | 色変換(色) 46
3 血の色 / #b30000 / #360800 / #ff0000 | 色 31
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
5 RGBの種類 / ビットカラー | RGB(色) 24
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
8 Design 0 20
9 「bgcolor」「background-color」「background」の違い | CSS 15
10 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
11 HSLとHSVの違い | 色変換(色) 11
12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
13 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 9
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
13 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 9
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 9
13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
14 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
2021/8/2 1:01 更新