[CSS3]transitionのまとメモ

昨夜は会社で寝てました。で起きました。
当然「え?え?え?どこ?いつ?なんじ?」な状態です。下山です。

最近頻繁に使うtransitionまとメモ。

transitionって?

指定したスタイルを別のスタイルへ滑らかに変化されるためのプロパティです。
例えばボタンにオンマウスで滑らかに背景色を変えるとかさ。

サンプル

html

CSS

htmlはul liを使用してアンカーを並べているだけ。
CSSで横に並べてli内、aの背景色をhoverで赤に入れ替える。
とごく普通のスタイルですがtransition-propertyとtransition-durationを利用して滑らかに変化するようになります。

こんな感じです。

ボクが日頃使うのはこの程度ですが、他にもtransition-timing-function(変化のパターン)やtransition-delay(遅延処理)もあります。
transition-timing-functionの値は以下の通り

transition一括指定

で、もちろん一括指定も可能です。
一括指定する場合はtransitionを使用します。

という感じです。

上のコードを一括指定すると

となります。
demo

当然のことながらIEは無理っ!(IE10ならOK)

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク