[CSS]CSS3アニメーションの効果的な使い方

Post on:2010年5月17日

1. アニメーションで背景色を変更

マウスのホバーで、背景色をアニメーションで変更します。

CSS

<textarea name="code" class="css" cols="60" rows="5">
#example-1 .example-area blockquote {
   background: #eee;
   ⋮

   transition: all .3s linear;
   -o-transition: all .3s linear;
   -moz-transition: all .3s linear;
   -webkit-transition: all .3s linear;
}
#example-1 .example-area blockquote:hover {
   background: #aaa;
}
</textarea>

#example-1 .example-area blockquote {

background: #eee;

⋮

transition: all .3s linear;

-o-transition: all .3s linear;

-moz-transition: all .3s linear;

-webkit-transition: all .3s linear;

}

#example-1 .example-area blockquote:hover {

background: #aaa;

}

</textarea>

2. アニメーションの速度

アニメーションの速度をそれぞれ変更して検証します。
このような大きなオブジェクトの場合は、アニメーションのスピードが遅いとユーザーはいらいらする可能性があります。

<textarea name="code" class="css" cols="60" rows="5">
#example-2 .item {
   background: #ccc;
   height: 30px;
   ⋮
}
.example-area .item {
   transition: all 1s linear;
   ⋮
}
.example-area .item-2 {
   transition-duration: .75s;
   ⋮
}
.example-area .item-3 {
   transition-duration: .5s;
   ⋮
}
.example-area .item-4 {
   transition-duration: .25s;
   ⋮
}
#example-2 .item:hover,
#example-2 .item:focus {
   height: 200px;
}
</textarea>

#example-2 .item {

background: #ccc;

height: 30px;

⋮

}

.example-area .item {

transition: all 1s linear;

⋮

}

.example-area .item-2 {

transition-duration: .75s;

⋮

}

.example-area .item-3 {

transition-duration: .5s;

⋮

}

.example-area .item-4 {

transition-duration: .25s;

⋮

}

#example-2 .item:hover,

#example-2 .item:focus {

height: 200px;

}

</textarea>

3. アニメーションでリンクの背景色を変更

マウスのホバーで、リンクの背景色をアニメーションで変更します。
上記「2. アニメーションの速度」よりスペースが小さいため、アニメーションは同じスピードでも遅く感じます。

<textarea name="code" class="css" cols="60" rows="5">
#example-3 .item,
#example-3 .item {
   background: #fffef7;
   ⋮
}
#example-3 .item:hover,
#example-3 .item:focus {
   background: rgb(235, 111, 0);
   color: #fff;
}
</textarea>

#example-3 .item,

#example-3 .item {

background: #fffef7;

⋮

}

#example-3 .item:hover,

#example-3 .item:focus {

background: rgb(235, 111, 0);

color: #fff;

}

</textarea>

4. カラーのアニメーション

一番目は背景色を指定せず「transparent」にしたもの、二番目は背景色を指定したもの、三番目は背景色を指定し更に背景をもったものです。
三番目のように一様な背景で自然に見せるためには、四番目のRGBaを使用します。これは特に最近流行のざらっとしたテクスチャに有効です。

<textarea name="code" class="css" cols="60" rows="5">
#example-4 .item {
   height: 75px;
   width: 75px;
   transition: background-color .5s linear;
   ⋮
}
#example-4 .item-1 { background: transparent; }
#example-4 .item-2 { background: #fffef7; }
#example-4 .item-3 { background: #fffef7; }
#example-4 .item-4 { background: rgba(255, 254, 247, 0); }

#example-4 .item:hover,
#example-4 .item:focus {
   background-color: rgb(235, 111, 0);
   background-color: rgba(235, 111, 0, 1);
}
</textarea>