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

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

参考：

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

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

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

transition

参考：

transition | MDN

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

transition-timing-function | MDN

transition | CSS3リファレンス

CSS transition Property | W3Schools

9.1. Properties from CSS – CSS Transitions | W3C

transition の使い方

参考：

transition | HALAWATA.NET

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

animation

参考：

animation | MDN

animation | CSS3リファレンス

CSS animation Property | W3Schools

animation-timing-function

参考：

 

animation-timing-function | MDN

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

@keyframes

@keyframes | MDN

animation の使い方

参考：

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

animation-direction

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

参考：

animation-direction | CSS3 リファレンス

animation-direction | MDN

animation-fill-mode

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

参考：

animation-fill-mode | MDN

回転させる

参考：

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

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

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

参考：

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

サンプル

参考：

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

スピナー

参考：

Single Element CSS Spinners | Luke Haas