※スマホ対応はしてません。

タグ: transition

CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。

カテゴリー: CSS

いえーいCSSでぐりぐり動かしてますか!

やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。

CSSでのアニメーションは二種類

実はCSSのアニメーション、と言っても二種類あります。

  • transition … マウスホバーとかの操作時に動くやつ
  • animation … ずっと動き続けるやつ
  • プロパティは割と似てる
  • 今のところ、どちらもベンダープレフィクスが必要

頻繁に使われるのは前者でしょうか。

transitionでさくっとアニメーション

リンクにカーソルを載せると文字色が変わる、という例。

:link {
  color: #00f;
  transition: color .5s;
}
:link:hover {
  color: #f00;
}
  • transitionプロパティで設定します。
  • 値は「変化させたいプロパティの名前」と「変化にかける時間」です。
    • 時間の単位はsで、secondsつまり秒です。
    • (ちなみにCSSは0.1を.1と記述する事が出来ます。)
  • 複数設定する場合はカンマ,で区切ります。
  • 他に変化のさせ方と、変化前の待ち時間を設定する事が出来ます。

animationでがつっとアニメーション

.selector {
  animation: blink 1s infinite;
}
@keyframes blink {
      0% { opacity:1 }
    100% { opacity:0 }
}
  • animationと@keyframesの二種類が必要です。
  • animationから利用するkeyframesの名前を指定します。
  • @keyframesでアニメーションの内容を指定します。
  • animationで指定するのは全体の時間です。
  • @keyframesで指定するのは時間のうちの進行割合です。
  • 再生時間はanimationで指定します。
  • 何も指定しなければ、アニメーションは0→100%までやって終わります。
  • infiniteを指定すると、何度も繰り返します。
  • alternateを指定すると、行って戻ってが出来ます。

もっとくわしく

MDNあたりを。

おしまい

実は後日の記事への布石です。

CSSの変化をアニメーションさせるtransitionについてまとめたよ。(CSS おれおれ Advent Calendar 2012 – 22日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 22日目

(ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 )

前提:CSSにおけるアニメーションは以下の二種類あります。

  • Transitions … 変化するもの
  • Animations … 動き続けるもの

今回は前者について取り上げます。後者もいずれ。

概要

transitionは値の変化をアニメーションさせる、という事を指定するものです。

例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。

常に動き続けているようなアニメーションは、animateの方の領分です。

使える場面

(さらに…)