2014/05/19

シンプルなのに効果的！CSS3トランジションを使ったマウスオーバーアニメーション11

「transition」プロパティを利用する

通常、マウスオーバーで色などを変更させる場合には、hover擬似クラスでカラーを指定します。
ここでアニメーション効果を入れたい場合に利用するのが「transition」プロパティです。

基本は「transition: プロパティ名　時間　アニメーション方法 ;」

「transition」プロパティの基本は「transition: プロパティ名　時間　アニメーション方法 ;」という使い方をします。
プロパティ名
=プロパティ名に「all」と記述すると、「hover」で指定したすべてのプロパティがアニメーションされます。
時間
=どれぐらいの時間をかけてアニメーションさせるのかをしています。「◯s」と指定します。
アニメーション方法
=「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定して、好みの変化をつけます。

共通のHTMLとCSS

CSS3トランジションを使ったマウスオーバーアニメーションのサンプルをご紹介するにあたって、共通となるHTMLとCSSを掲載しておきます。

[html]
<!DOCTYPE html>
<html>
<head>

<div class="fade">フェードイン</div>
<div class="color">カラーチェンジ</div>
<div class="grow">拡大</div>
<div class="shrink">縮小</div>
<div class="wide">伸縮</div>
<div class="rotate">傾き</div>
<div class="flip">回転</div>
<div class="circle">資格から丸へ</div>
<div class="shadow">3Dシャドウ</div>
<div class="swing">スウィング</div>
<div class="border">インセットボーダー</div>

</body>
</html>
[/html]

CSSは以下のようになります。
上記htmlのdivに対してアニメーションを実装していきます。
「伸縮」というアニメーション以外は、すべて共通です（右にだけ伸縮させたいので、共通化できませんでした。すいません）。
「transition」プロパティは、all＝すべてに適用し、時間＝0.5s かけてアニメーションさせるようにしています。

[css]
/*全共通*/

body > div {
margin:100px auto;

width:400px;
height:200px;

background:#676470;
color:#fff;

font-family:Lato;
font-weight:900;
font-size:2em;

text-align:center;
line-height:200px;

/*トランジションプロパティ */
transition:all 0.5s;

}

[/css]

フェードイン

フェードインは、opacity（ボックスの透明度）で実装します。
0で完全な透明になり、1.0で不透明になります。

[css]
/* フェードイン */
.fade {
opacity:0.5;
}
.fade:hover
{
opacity:1;
}
[/css]

Demo

カラーチェンジ

色の変更は、hover擬似クラスで変化させたい色を指定します。

[css]
/* カラーチェンジ */

.color:hover {
background:#eb8f52;
}
[/css]

Demo

拡大

拡大させたい場合は、transform:scale(数値)プロパティを利用します。

[css]
/* 拡大 */
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
[/css]

Demo

縮小

縮小させたい場合も、transform:scale(数値)　プロパティを利用します。

[css]
/* 縮小 */
.shrink:hover {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
[/css]

Demo

伸縮

伸縮と書いていますが、実際にはマージンの値を変えて、あたかも伸縮しているようにみせているだけです。
ここでは、左から右に伸縮させたいので、margin-leftの値を変えています。

[css]
/* 伸縮 */

/* アニメーションが異なるため、ここだけ個別の指定になっています */
.wide {
width: 600px;
margin-left: -450px;
text-align: right;
padding-right: 20px;
}
/* 伸縮効果 */
.wide:hover {
margin-left: -100px;　
}
[/css]

Demo

傾き

要素を傾けたいときには、transform: rotate(数値deg) プロパティを利用します。
degは傾ける角度（時計回り）になります。

[css]
/* 傾き */
.rotate:hover {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
[/css]

Demo

フリップ

3Dのような形でフリップさせるわけですが、「scaleX(-1)」を利用してあたかもフリップしているようにみせています。

[css]
/* フリップ */
.flip:hover {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
[/css]

Demo

四角から丸へ

四角形を丸に変化させるには、border-radiusプロパティを利用します。

[css]
.circle:hover {
border-radius:50%;
}
[/css]

Demo

3Dシャドウ

3Dシャドウを実装するには、box-shadowプロパティと、transform: translateプロパティ（移動）を使います。

[css]
.shadow:hover {
box-shadow:1px 1px #eb9552,
2px 2px #eb9552,
3px 3px #eb9552;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
[/css]

Demo

スウィング

左右にブルブルふるえる動きですが、transform: translateプロパティ（移動）にくわえ、@keyframesと animationプロパティを使います。
animationプロパティを利用すると、キーフレームを利用したアニメーションを設定できます。
キーフレームは「@keyframes キーフレーム名 {}」という形でキームレームを作成ます。
@keyframesの中には、始点から終点までのキーフレームを設定します。
始点は0%{}、終点は100%{}に記述し、適宜、1〜99％{}のキーフレームを設定します。
設定したキーフレームに対してアニメーションを実装するには、「animation キーフレーム名再生時間」を指定してやります。

[css]
/* スウィング */
@-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

.swing:hover {
-webkit-animation: swing 1s ease; /* easeは最初と最後を滑らかに再生する補完方法 */
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;/* アニメーションの繰り返し回数を指定 */
animation-iteration-count: 1;
}

[/css]

Demo