CSSでアニメーションできる”transition”を使いこなそう!!

  • このエントリーをはてなブックマークに追加
こんにちは!
4月に新卒入社した西峯です。
BLOG記事を書く順番がついに回ってきたので、何について書こうかなと思ったのですが、
以前同じOEM制作班の迫田君がCSSの”position”を使いこなそう!!という記事を書いていたので、
今回はそれに対抗してCSSの”transition”について紹介しようと思います。

CSSの疑似クラス

CSSには疑似クラスというものがあり、
これを使うと、ユーザーの起こしたアクションに対してCSSの装飾を変えることができます。

例えば、
OWLet上で、

こんな感じにパーツを組んで…

CSSでは、

.box {

width: 100px;

height: 100px;

background-color: #ffff00;

}

 

.box:hover {

width: 200px;

height: 200px;

background-color: #00ffff;

}

と書くと、

こんな感じで、マウスカーソルを乗せたときに
四角がパッと大きくなって色も変わりました。

:hoverはマウスカーソルを上に乗せたときにどういう装飾をするかという意味になります。

でも、これだけではパッと変わるのでちょっと不格好です。

そんなときに、transitionが登場します。

アニメーションをつけよう

先ほど書いたCSSにこんな感じで記述を追加してみましょう。

.box {

width: 100px;

height: 100px;

background-color: #ffff00;

transition-duration: 1s;

}

すると…

四角の箱がぬるっと変化していきます。

これがtransitionの威力です。

ちなみに今回は1秒かけて変化するようにしてみましたが、
秒数を変えることもできますし、アニメーションの仕方も色々変えることができます。

これを活用して、Webサイトをリッチにしましょう!

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>