動機
ただ，こいつがどうやって回転しているのか気になったのでコード眺めたというだけの話。
どうやって動いているのか
結論
- App.cssに回転の設定がある。jsとかで動いているわけではない。
- App.tsxのアイコンのclass名にこの設定が適用されている。
App.cssの説明
App.css
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
この部分が該当部分です。App-logoに対してanimationのプロパティを設定しています。
-
App-logo-spin: アニメーションの名前 -
infinite: 無限ループ -
20s: 1サイクルの時間。試しに1sにしたら爆速で回転した。 -
linear: 線形でアニメーションんが進行する。animation見るとeaseとかease-in等いろいろオプションがありそう。
補足: @media prefers-reduced-motionはユーザがページの動きを少なくする設定時の動作を規定しており，no-preferenceになっているので該当時にはアニメーションは動きません。
このApp-logo-spinに関して追加で回転範囲の設定が入っています。
App.css
@keyframes App-logo-spin {
/* 360度回転する*/
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframesはキーフレームを制御するため，fromとtoでアニメーションの始まりと終わりを定義しています。
App.tsxの設定
App.tsx
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
こんな感じでlogo画像にCSSのclassNameApp-logoを指定することで適用しています。
他の部分も同じ設定にすれば回転させられるはず。
感想
Web系のデザインとかあまりやったことないですが，CSSにも細かいオプションがたくさんあるんだなと改めて感じ，CSSは自前で1から書くのは現実的で無いなと思いました。