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

参考:

@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:アニメーション終了後、最後のキーフレームのスタイルを適用する
  • backwardsanimation-delay の期間、最初のキーフレームのスタイルを適用する
  • bothforwardsbackwards の両方の効果を適用する

参考:

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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です