トランジション/アニメーション
参考:
@keyframes と animation 関連のまとめ – Qiita
transition
参考:
transition-timing-function | MDN
CSS transition Property | W3Schools
9.1. Properties from CSS – CSS Transitions | W3C
transition の使い方
参考:
transition でプロパティを複数指定する | 広い部屋に引っ越したい
animation
参考:
CSS animation Property | W3Schools
animation-timing-function
参考:
animation-timing-function | MDN
アニメーションをデザインしよう! 知っておきたい CSS イージングのお手本 | ICS MEDIA
@keyframes
animation の使い方
参考:
animation-direction
normal
:通常再生reverse
:逆再生alternate
:交互に往復して再生 (通常再生と逆再生を交互に繰り返す)alternate-reverse
:交互に往復して再生 (逆再生から開始)
参考:
animation-direction | CSS3 リファレンス
animation-fill-mode
none
:アニメーション外のスタイルには影響しないforwards
:アニメーション終了後、最後のキーフレームのスタイルを適用するbackwards
:animation-delay
の期間、最初のキーフレームのスタイルを適用するboth
:forwards
とbackwards
の両方の効果を適用する
参考:
回転させる
参考:
アニメーション (animation) で回転させる | ハックノート
CSS で要素を回転させる方法 | Takumi Hirashima
マウスオーバーアニメーション
参考:
サンプル
参考:
css animation – CodePen Search
30 Pure CSS Animation Snippets & Demos | Envato Blog
Animatable: One property, two values, endless possibilities | Lea Verou
Explore the new frontier of CSS animation | Creative Bloq
スピナー
参考: