userChrome.css・userContent.cssスレ Part9

**名無しさん＠お腹いっぱい。** · 2018/12/07(金) 08:26:44.73

●※前スレ
userChrome.css・userContent.cssスレ Part8
http://egg.5ch.net/test/read.cgi/software/1513178964/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/

●スクリプト
userChromeJS/UserCSSLoader at master ・ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader
UserCSSManager
https://greasyfork.org/scripts/35880

●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）

●関連サイト
userstyles.org
https://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/

**名無しさん＠お腹いっぱい。** · 2019/03/23(土) 16:11:30.04

前から言われてるけど英数字がおかしくなってる

**名無しさん＠お腹いっぱい。** · 2019/03/23(土) 18:23:24.78

あーアプデしなきゃよかった
ブックマークフォルダ閉じるやつ機能しなくなった

**名無しさん＠お腹いっぱい。** · 2019/03/23(土) 18:30:07.54

自決

**名無しさん＠お腹いっぱい。** · 2019/03/23(土) 18:31:21.40

タブにCSSで番号付けてるがこの数字だけフォントおかしい

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 01:06:25.27

Firefox66 or 66.01でまだ多段化出来てない奴いる？
ここの多段化の内容をuserChrome.cssに貼り付けるだけでいけたぞ
ただ、最後の●のPxを41とかだとぐちゃぐちゃの表示になる
90で俺はちょうどだった
最初の●は30にしてる

URL貼るとROCKなんたらで書き込めないから

3/20更新【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する【ver.66対応】
　　　でググったら一番上に出てくるサイトね

これだけだと一番下のタブが横幅広くなるから、
min-width: 90px !important;　　の下に

max-width: 90px !important;
　を加えればタブ幅が、一定になる

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 01:16:06.25

な、age厨だろ

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 01:57:51.31

あちこちに貼りやがってウゼー

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 15:24:04.92

>>458
効いてる場所のが多いけど効いてるところもある
オプションのフォントでウェブページが指定したフォントを優先するの有効無効でも変わる

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 20:58:28.02

>>463
多段の状態で、タブの位置を下ってどうするんですか？
下にするのがうまくいかない

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 21:38:08.82

>>460-461
俺も今アプデでやっちまったんだけど、どうやったの

**名無しさん＠お腹いっぱい。** · 2019/03/24(日) 22:18:11.68

AutoCloseBookMarkFolder_Fx37.uc.jsのことなら66対応のがあるよ

**468** · 2019/03/25(月) 00:41:39.12

>>469
見つけたわ、なんか前のやつにメモ帳で開いてコピペ上書きしたら動かんくてキレてたけど
新しく保存して置き換えたら作動したわありがと

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 03:21:10.64

>>467
タブを上の段から下の段へ移動してもタブが変な位置に移動しない方法ってこと？
それとも、タブをツールバーの下に配置ってこと？

上記ならuserChrome.cssだけじゃ設定できないからこっち使ったほうがいいと思うよ
http://seibunji.blog.jp/archives/52266903.html

タブをツールバーの下にってことなら、userChrome.cssにこれ追加すればいいんじゃないかなあ
http://ssbsblg.blogspot.com/2019/02/01.html

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 13:53:18.54

新しいタブを開く＋ボタンが効かなくなった。
皆さん、どうですか？

/* 新しいタブボタン設定 */
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;*/
}

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 13:59:55.19

新しいタブを開くボタンってFirefoxがデフォで持ってないか？
それじゃダメなの？

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 14:00:49.63

/* 新しいタブボタン設定 */
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;←
}

連投すみません。←の所に余計なもの付けて書き込みしてしまいました。

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 14:08:23.14

>>473
そのデフォのはずのボタンが効かなくなったんです。
cssでボタンに関する記述は上記だけと思います。
タブのブックマークツールバー下移動とタブの多段表示はやっていますが。

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 18:45:35.44

おま環
多段表示が怪しい気がする

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 18:51:05.65

自分で中身を把握出来ない拾いもんのスクリプト
使ってるっぽいな

**名無しさん＠お腹いっぱい。** · 2019/03/26(火) 22:05:03.58

多段は出来たけど、タイトルバー・ボタンetcバーに続いて
上から
1.ブックマークツールバー
2.メニューバー
3.タブバー　の並びになって違和感

1と2が逆にならない

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 00:21:01.06

多段にするだけならCSS4行で出来るのに…

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 07:59:30.27

多段くらい標準で入れとけってんだよな
タブブラウザのくせに

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 08:42:32.56

多段＋タブを下にはできたんですけどサイドバーのブックマークの字と字の間詰められないですかね

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 09:32:24.10

>>479
CSS4行で出来る構文、教えて頂きたいです。

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 09:47:30.40

>>481
行間のことなら検索↓
ブックマークサイドバーの間隔を減らす方法

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 11:00:00.51

>>483
できましたありがとう

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 12:29:24.72

66にしたらタブをダブルクリックでリロードができなくなったけどどうすればいいのだろう

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 13:38:55.49

>>485
少なくともこのスレでやれることはない

**名無しさん＠お腹いっぱい。** · 2019/03/27(水) 13:58:19.15

https://egg.5ch.net/test/read.cgi/software/1549382075/230-231

**名無しさん＠お腹いっぱい。** · 2019/03/29(金) 13:20:03.62

多段入れたら閉じるボタンとか重なって押せないじゃんorz

**名無しさん＠お腹いっぱい。** · 2019/03/29(金) 18:00:15.82

CSSで変更してるなら重ならないようにできるじゃろ

**名無しさん＠お腹いっぱい。** · 2019/03/29(金) 18:30:25.11

>>479
教えないなら書き込むなや
CSS4行で出来るなら見せてみんさい

**名無しさん＠お腹いっぱい。** · 2019/03/30(土) 01:27:27.85

各scrollboxをvisibleとblockするだけだろアホか

**名無しさん＠お腹いっぱい。** · 2019/03/30(土) 23:52:44.71

その４行をココに提示すれば解決すんじゃね？

**名無しさん＠お腹いっぱい。** · 2019/03/31(日) 00:48:15.27

本人じゃねえがこうかな
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox{
display: block!important;
overflow: visible!important;
}

**名無しさん＠お腹いっぱい。** · 2019/03/31(日) 21:26:20.29

右上のバツとか最小化とかできる3つのやつを開閉式にできるんかな
ふにゃふにゃって感じで開閉したいので誰か手を貸してください

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 00:45:46.02

ちょっと聞きたいんだけど
ページの読み込みが完了した瞬間にタブにシュパッと青いエフェクトみたいのが横方向に走るじゃん？
アレの色を変えてみたくてクラス調べてみたんだけどイマイチ分からん
.tab-loading-burstってのかと思ったら変わらんから違ったみたい
教えてくだしあ

もしかしてCSSでは無理？

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 03:02:13.12

自決したはｽﾏﾝ

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 03:38:32.70

>>496
自決は質問スレでしてたぞｗ

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 04:26:30.65

Windows版Jane Style質問スレ65
224 ：名無しさん＠お腹いっぱい。[sage]：2019/04/01(月) 00:14:33.58 ID:P7lNonpH0
な、age厨だろ

userChrome.css・userContent.cssスレ Part9
495 ：名無しさん＠お腹いっぱい。[sage]：2019/04/01(月) 00:45:46.02 ID:P7lNonpH0
ちょっと聞きたいんだけど
ページの読み込みが完了した瞬間にタブにシュパッと青いエフェクトみたいのが横方向に走るじゃん？
アレの色を変えてみたくてクラス調べてみたんだけどイマイチ分からん
.tab-loading-burstってのかと思ったら変わらんから違ったみたい
教えてくだしあ

もしかしてCSSでは無理？

userChrome.css・userContent.cssスレ Part9
496 ：名無しさん＠お腹いっぱい。[sage]：2019/04/01(月) 03:02:13.12 ID:P7lNonpH0
自決したはｽﾏﾝ

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 08:57:14.34

>>496
え？.tab-loading-burstと違うの？
.tab-loading-burst[bursting]::before {
fill: #e0ffff !important;
}
とかじゃないのか；
自分で解決したのは何よりだけど質問した以上はどう解決したか書いていって欲しいものよ
情報の更新と何よりあとからやってくる質問者の為にも。

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 10:38:11.85

500

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 19:49:45.57

.titlebar-buttonbox-containerを１番右側に置きつつ、メニューバーにあるブックマークやアドオンを右寄せにする方法を誰か教えてください

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 20:20:47.03

>>501
#toolbar-menubar > spacer ~ * {
-moz-box-ordinal-group: 2000 !important;
}
#toolbar-menubar > spacer ~ .titlebar-buttonbox-container {
-moz-box-ordinal-group: 3000 !important;
}

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 20:39:37.80

>>502
ありがとう！
でも、それだとブックマークがよらないっぽい
(.titlebar-buttonbox-containerはホバーで表示するようにしてます)
https://i.imgur.com/QWGYhD9.jpg

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 20:46:18.88

後出しwww

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 21:05:43.27

後出しやなくない？
ブックマークも寄せたいって最初から言ってるし
ホバーでの開閉は関係ない部分だし

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 21:12:09.29

>>503
あら…
ごめん、これちょっと分かんない
詳しい人居ないかな

ブックマークが占める幅が十分に小さければ、とりあえずこれでごまかせるかも

#toolbar-menubar > spacer ~ #personal-bookmarks {
-moz-box-flex: 0 !important;
}

これをやると「ブックマークツールバーの項目」のオーバーフローメニュー(>>)出なくなるので
ブックマークが増えたりウィンドウ幅を狭くしたときに、はみ出してしまう

**名無しさん＠お腹いっぱい。** · 2019/04/01(月) 21:20:27.91

>>506
ありがとう！
解決しました！

**名無しさん＠お腹いっぱい。** · 2019/04/02(火) 15:39:16.67

ShadowFox、プロファイル指定して適用できるんかな？

**名無しさん＠お腹いっぱい。** · 2019/04/02(火) 23:42:58.24

あちこちに置いてあるuserChrome.cssをベースにwebページで用いられてるcssを
検索したりして作ってきたけどできることは限られてるわ

**名無しさん＠お腹いっぱい。** · 2019/04/04(木) 00:55:21.04

最近俺的にuserChrome.cssばっかりいぢってて
すっかりstylusアドオンの影が薄くなってるんだけど
stylus系のcssでなんかオススメある？　(ｸﾚｸﾚ)

**名無しさん＠お腹いっぱい。** · 2019/04/04(木) 10:29:34.22

"CSSのみで「target="_blank"」のリンクを一目で判別できるようにする"をGoogle検索

カーソルアイコン変更デモページのリンクをブラウザで開き
ブラウザのキャッシュにあるlink_blank.pngを取り出しbase64テキスト変換
cursor: urlに入れてやる

a[target="_blank"] {
cursor: url(""), pointer !important;
}

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 00:17:24.07

スクロールバー回り色を変える細くするだけじゃなく
丸くできるとかボタンデザイン変えれるとかWebkit並みにできればいいのに

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 08:16:50.52

Quantumリリース以前まで、CSSはStylishで一括管理していました。
Quantumリリース後はStylishの一部をStylusに移行し、ほとんどのCSSはuserChrome.cssで管理しています。
今はStylishもリリースされてるようで、Stylus,Stylish,usersChrome.cssをどのように使いわければ良いの？

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 11:18:16.24

StylishでできることはStylusでもできる
「Stylish=(Stylus-信頼性)」もしくは「Stylish=(Stylus+スパイウェア騒動)」
これまで通りStylusとuserChrome.cssを使えばいい

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 11:21:22.93

念のため
>>514でのStylishはWE移行後の話な

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 12:13:56.14

>>513
どうせuserChrome.cssじゃないとダメなことはアドオンではずっとできないままだし
今のままでいい

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 13:01:20.96

機能的にもStylus > Stylish3だしな

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 13:23:42.86

Stylishはモジラにお金渡して復活したのだろうか

**名無しさん＠お腹いっぱい。** · 2019/04/07(日) 17:51:54.74

>>514
了解、StylusとserChrome.cssで運用します。

**名無しさん＠お腹いっぱい。** · 2019/04/08(月) 01:57:57.64

stylus系で出来ることメッチャ減っちゃったよなWEで

**名無しさん＠お腹いっぱい。** · 2019/04/12(金) 10:43:42.25

タブの切り替えとかで読み込んでるときに黒く表示させたいんですけど、
usercssでどうやって打つか教えてください。。

**名無しさん＠お腹いっぱい。** · 2019/04/12(金) 17:08:37.68

>>521
新しいタブでは効かないです
.tabbrowser-tab[bursting] .tab-background {
background-color: black !important;
}

**名無しさん＠お腹いっぱい。** · 2019/04/12(金) 17:42:28.00

#tabbrowser-tabpanels{
background-color: black!important
}

**名無しさん＠お腹いっぱい。** · 2019/04/12(金) 20:15:55.06

読み込んでるタブを黒くするんじゃなかったのか

**名無しさん＠お腹いっぱい。** · 2019/04/14(日) 22:14:13.91

!important 付きのCSSで twitter.com には効くのに、
他のサイトのTwitter埋め込み部分に効かないのは何が原因でしょうか？

**名無しさん＠お腹いっぱい。** · 2019/04/15(月) 00:18:44.76

>>525
twitter.comではないから
その要素の実体のURLを調べてみ

**名無しさん＠お腹いっぱい。** · 2019/04/22(月) 03:16:28.43

>>522>>523
ありがとうございました

**名無しさん＠お腹いっぱい。** · 2019/04/22(月) 07:54:41.45

>>522のは読み込み完了時だった
読み込み中のはこっち
background-colorもbackgroundに

.tabbrowser-tab[busy] .tab-background {
background: black !important;
}

**名無しさん＠お腹いっぱい。** · 2019/04/25(木) 09:03:47.00

68になったら、userChrome-tabs_on_bottom_Fx65.cssが効かなくなりました
また、お世話になります、よろしく

**名無しさん＠お腹いっぱい。** · 2019/04/25(木) 09:06:27.84

なお、環境によっては
アドオンもcssも読みこまれないで、リセット状態になりますので、ご注意を

**名無しさん＠お腹いっぱい。** · 2019/04/26(金) 02:54:13.37

セーフモードで三メニューが開かない

**名無しさん＠お腹いっぱい。** · 2019/04/28(日) 22:50:30.56

Google Chrome + Stylusです。

グーグルの検索結果に対して2つのスタイルを適用しているのですが、片方だけ2～3ヶ月前？から効かなくなりました。
検索結果のページタイトルに番号を付与するスタイルと、PDFやヤフー知恵袋等の特定のリンク横にアイコンを表示するスタイルなのですが、番号だけしか表示されません。
以前は両方表示できていました。
番号を付与するスタイルを無効にするとアイコンが表示されるようになるのですが、両方を同時に表示できるようにする方法はないでしょうか？

↓グーグルの検索結果に番号を付与するスタイルです。

/*** ウェブ検索 ***/
body { counter-reset: result !important; }

/* google.com */
.rc > h3.r:before
{ content: counter(result) ". " !important;
counter-increment: result !important; }

/* google.co.jp */
div.r > a:not([class]):before
{ content: counter(result) ". " !important;
counter-increment: result !important;
font-size: 18px !important; }

**名無しさん＠お腹いっぱい。** · 2019/04/28(日) 22:57:43.84

特定のリンク横にアイコンを付与するスタイルの一例です。

/* --- PDFファイル --- */
:-moz-any-link[href$=".pdf"]:before
{ content: url("moz-icon://.pdf?size=16");
margin-right: 2px; }

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 00:19:46.24

何このﾁｮﾛﾏｰガイジ

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 07:41:55.68

>>532
Firefoxでは正常

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 07:45:23.47

>>532
Chromeでも正常だった

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 09:52:59.29

うまくいかなかったからこんな感じにした

/* --- PDFファイル --- */
a[href$=".pdf"]:after
{ content: url("http://icons.iconarchive.com/icons/treetog/file-type/16/pdf-icon.png";);
margin-left: 2px; }

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 11:46:55.44

66と67で有効だったが、68でダメになった

ブックマークメニューの [タブですべて開く] 非表示
menuitem.openintabs-menuitem{display: none !important;}

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 19:48:09.94

ロダのabout_addon_revert_version_number.cssが効かずバージョン番号が表示されなくなってる。
代替策ありませんか？

**名無しさん＠お腹いっぱい。** · 2019/04/29(月) 23:54:54.32

ブラウザーツールボックスの使い方を勉強していたのですが
何かの操作を間違えたようでブラウザーツールボックスが表示されなくなってしました。
一瞬だけチラッと枠だけでて消えてしまう状態です。
元通りにするにはどうすればいいでしょうか？

**名無しさん＠お腹いっぱい。** · 2019/04/30(火) 00:43:47.68

>>540
>>245

**名無しさん＠お腹いっぱい。** · 2019/04/30(火) 01:47:20.80

youtubeにアクセスすると出る

YouTube にログインしていません
動画の評価、コメント、チャンネル登録を行うにはログインしてください。

これを消したいのですが、どのように書けばよいですか？
よろしくお願いします

**名無しさん＠お腹いっぱい。** · 2019/04/30(火) 05:27:34.14

>>541
540です
ありがとうございます。

**名無しさん＠お腹いっぱい。** · 2019/05/01(水) 01:20:14.49

わたしは422です

**名無しさん＠お腹いっぱい。** · 2019/05/01(水) 13:53:31.17

66.0.3の既定テーマを使っています。
タイトルバーまたはタブバーの背景を黒から白にしたいのですが以前使っていた下のコードが使用できなくなってしまいました。
もう変更できなくなったんでしょうか？
よろしくお願いします。

/* 標準のタイトルバーの背景色 */
:root:-moz-lwtheme-darktext {--chrome-background-color: #ffffff !important;}

/* プライベートのタイトルバーの背景色 */
:root:-moz-lwtheme-darktext[privatebrowsingmode] {--chrome-background-color: #8000d7 !important;}

**名無しさん＠お腹いっぱい。** · 2019/05/11(土) 19:28:23.00

Stylishのスタイル情報をどっちかのcss（userContent.css？）で動作できた覚えがあるんだけど別物？
Stylishのスタイル情報をuserContent.cssにそのままコピペするだけで動作するのかな？
userContent.cssでもスパイ的なことするの？

**名無しさん＠お腹いっぱい。** · 2019/05/11(土) 21:41:38.63

>>546
userContent.cssだけどうまくいかないこともあるかも
スパイは無い

**名無しさん＠お腹いっぱい。** · 2019/05/11(土) 23:44:28.30

ナルホ
吸いだす作業も地味にめんどいけど試してみる

**名無しさん＠お腹いっぱい。** · 2019/05/13(月) 21:05:48.18

ちょっと聞きたいんだけど
タブのファビコンをページ読み込み完了時にちょこっと動かすって感じのcss書いてて
動かすのは出来てるんだけど
『ページ読み込み完了時に』ってのがどう記述したらいいのか分からない
cssじゃ無理なんかね？教えてくだしあ

**名無しさん＠お腹いっぱい。** · 2019/05/13(月) 21:38:09.59

>>549
.tabbrowser-tab[bursting]

**名無しさん＠お腹いっぱい。** · 2019/05/13(月) 23:18:27.27

>>550 ㌧
あ、burstingでええんか…
でもなぜか動かねえw
ちょっと試行錯誤してみる㌧

**名無しさん＠お腹いっぱい。** · 2019/05/14(火) 00:03:34.89

すんません、コンテキストメニューの区切りの色を変更って出来ますか？
もし出来るのならどう書けば良いのでしょうか？

**名無しさん＠お腹いっぱい。** · 2019/05/14(火) 06:35:25.33

menuseparator{
border-color: #****** !important;
}

辺り？

**名無しさん＠お腹いっぱい。** · 2019/05/14(火) 13:11:31.63

-moz-appearance: none !important;
を先に指定すればそれでいい

**名無しさん＠お腹いっぱい。** · 2019/05/14(火) 17:23:05.60

サイドバーのブックマークタイトル
｢ブックマーク｣を｢Bookmark｣にするにはどうすれば良いのでしょうか？

**551** · 2019/05/14(火) 20:49:38.05

burstingで動いたのは動いたんだが
今度transitionが効かねえ…何故だ？

.tabbrowser-tab[bursting] .tab-icon-image {
transform: rotate(90deg) !important;
transition: transform ease-in-out 2s !important;}

burstingが一瞬すぎて効かないのかと秒数減らしてもダメ
burstingに加えて読み込み完了後の通常時も指定してやらんとダメなん？
さっぱろ分からんわ教えてくだしあ

**552** · 2019/05/14(火) 22:21:57.66

変更できました。
ありがとうございます。

**名無しさん＠お腹いっぱい。** · 2019/05/15(水) 12:35:34.97

>>556
.tabbrowser-tab[bursting] .tab-icon-image {
animation: hoge .4s ease-in-out !important;
}
@keyframes hoge {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(-90deg);
}
}

参考にしたページ
https://mamewaza.com/support/blog/20150424.html
https://qiita.com/7968/items/1d999354e00db53bcbd8