CSSでアニメーションできる”transition”を使いこなそう！！
こんにちは！
4月に新卒入社した西峯です。
BLOG記事を書く順番がついに回ってきたので、何について書こうかなと思ったのですが、
以前同じOEM制作班の迫田君がCSSの”position”を使いこなそう！！という記事を書いていたので、
今回はそれに対抗して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サイトをリッチにしましょう！
