Transition/Animation

参考:

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

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

CSS アニメーションの利用 – CSS: カスケーディングスタイルシート | MDN

transition

transition – CSS: カスケーディングスタイルシート | MDN

transition-timing-function – CSS: カスケーディングスタイルシート | MDN

transition-CSS3リファレンス

CSS transition Property | W3Schools

9.1. Properties from CSS – CSS Transitions | W3C

transition の使い方

参考:

CSS3プロパティ transition | HALAWATA.NET

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

animation

参考:

animation – CSS: カスケーディングスタイルシート | MDN

animation-CSS3リファレンス

CSS animation Property | W3Schools

@keyframes

@keyframes – CSS: カスケーディングスタイルシート | 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 – CSS: カスケーディングスタイルシート | MDN

回転させる

参考:

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

コピペで簡単 CSS で要素を回転させる方法 | Takumi Hirashima

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

参考:

ワンポイントに使える CSS3 マウスオーバーアニメーション5種 | webOpixel

サンプル

参考:

CodePen Search – css animation

30 Pure CSS Animation Snippets & Demos | Envato Blog

Animatable: One property, two values, endless possibilities | Lea Verou

スピナー

参考:

Single Element CSS Spinners

Tagged:

コメントを残す

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