トランジション／アニメーション [CSS]

トランジション／アニメーション

参考：

CSS アニメーションの利用 | MDN

使い方

参考：

@keyframes と animation 関連のまとめ – Qiita

CSS アニメーション 入門 – Qiita

transition

カーソルを要素の上に当てると背景色が変わる。

.hover-to-change {
    background-color: #333;
    transition: background-color 200ms;
}
.hover-to-change:hover {
    background-color: #c33;
}
Code language: CSS (css)

見本：

参考：

transition でプロパティを複数指定する | 広い部屋に引っ越したい

transition | HALAWATA.NET

transition | HTML クイックリファレンス

CSS トランジションの使用 | MDN

transition | MDN

transition-timing-function | MDN

CSS transition Property | W3Schools

Transitions | CSS Transitions Draft 2018

animation

参考：

animation | HTML クイックリファレンス

animation | MDN

CSS animation Property | W3Schools

animation-timing-function

参考：

アニメーションをデザインしよう！ 知っておきたい CSS イージングのお手本 | ICS MEDIA

animation-timing-function | MDN

@keyframes

@keyframes | MDN

animation の使い方

参考：

animation プロパティ一覧 | なるほど。

animation-direction

• normal：通常再生
• reverse：逆再生
• alternate：交互に往復して再生 (通常再生と逆再生を交互に繰り返す)
• alternate-reverse：交互に往復して再生 (逆再生から開始)

参考：

animation-direction | HTML クイックリファレンス

animation-direction | MDN

animation-fill-mode

• none：アニメーション外のスタイルには影響しない
• forwards：アニメーション終了後、最後のキーフレームのスタイルを適用する
• backwards：animation-delay の期間、最初のキーフレームのスタイルを適用する
• both：forwards と backwards の両方の効果を適用する

参考：

animation-fill-mode | MDN

回転させる

参考：

アニメーションで回転させる | ハックノート

CSS で要素を回転させる方法 | Takumi Hirashima

マウスオーバーアニメーション

参考：

マウスオーバーアニメーション 5種 | webOpixel

トグルスイッチ

参考：

CSS で作る Toggle Switch を学んだのでさっそく作ってみた – Qiita

サンプル

参考：

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

CSS Animation – Search | CodePen

スピナー

参考：

Single Element CSS Spinners | Luke Haas