読者です 読者をやめる 読者になる 読者になる

KDE.BLOG

web制作で学んだことを記していきます

CSS3 animationのまとめ(基本編)

CSS animation

前回のtransitionに続き、animationについてもまとめておきます。
transitionよりも長くなりそうなので基本編と発展編に分けたいと思います。
まずは基本編から。

<目次>

  • animationのできること
  • 対応ブラウザ
  • 各プロパティの概要・構文
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state
    • animation
  • @keyframesの書き方
  • animationのイベント
  • まとめ
続きを読む

CSS3 transitionのまとめ

CSS animation

個人的に使うことがとても多いCSS3のtransition。
細かい設定をするとなると忘れてしまっている事柄もあるので整理してまとめておきます。

<目次>

  • transitionができること
  • transitionが適応できるcssプロパティ
  • 対応ブラウザ
  • 各プロパティの概要・構文
    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay
    • transition
  • プロパティ値の数による注意
  • transitionendイベント
    • 使いどころはwill-change?
  • まとめ
  • 参考記事
続きを読む