サンプル 1
HOVER で枠の背景色と幅サイズが変化し、角が丸くなります。
まずクラスtran01CSSの初期状態を設定し、その中で、transitionの設定をします。
今回は、
transition:秒数 スタイル；
を半角空けて指定します。そして、次にhoverの設定で、動きの終了時のCSSを記述します。
すると、その間の動きは、フラッシュのように自動的に図形（画像）が変化していきます。
まずは、初期のDIVボックスの表示と文字です。
１～７行目が通常の装飾の為のCSSで、9行目はtransitionでアニメーションの指定。
次の行はブラウザープリフィックス（UA拡張子）になります。
初期表示CSS3記述 1. .tran01{
2. width:700px;
3. margin:auto;
4. background:#006;
5. color:#FF0;
6. padding:25px;
7. border:#F00 thick solid;
8.
9. transition: 1s ease-in-out; /*上記CSS属性と値に影響する一般的なアニメーション記述*/
10. -webkit-transition: 1s ease-in-out; /*UAの記述*/
11. -moz-transition: 1s ease-in-out;
12. }
動きの最終表示CSS3記述
.tran01:hover{ /*onMouseで変わる属性と値で、その間はアニメーションで変化*/
width:450px;
background:#F00;
color:#00F;
padding:25px;
border:#009 thick solid;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
65
ホバーでオンマウス状態に時にアニメーションを開始させるために、最終表示のサイズや、
色など変化させて、記述します。
前記を<head>の中に記述しHTMLのDivタグなどに影響させると、マウスがのった時に DIVの枠や、文字の大きさや色が変化します。
Transitionha,基本このように利用する場合がい多く、hoverでオンマウスをきっかけに出来るのが
デザインする上でも使いやすい特徴です。
では、次のサンプルから、CSSのTransform（変形）などのバリエーションを加えて応用しましょう。
CSSとHTMLは同じページ内に書いても良いですし、別ファイルに作成してみてもいいと思います。
HTML記述
<div class="tran01">
<h1>animation サンプル1</h1>
<h2>HOVERで枠の背景色と幅サイズが<br>
変化し、角が丸くなります。
</h2>
</div>
66
サンプル２：応用
角丸アニメーションの記述
・ Transformと併用してみる。
・ Onmouseしたときrotationを使って枠を回転させてみる。
CSS3記述 .tran02{
background:#F39;
color:#006;
padding:25px;
border-radius: 200px;
transition: 5s ease-in-out; /*5秒間 最初と最後をイージングしたアニメーションにする*/
-webkit-transition: 5s ease-in-out;
-moz-transition: 5s ease-in-out;
}
.tran02:hover{
background:#00C;
transform: rotate(36000deg); /* ５秒間の変形で、1000回転する */
-webkit-transform: rotate(36000deg);
-moz-transform: rotate(36000deg);
}
HTML記述
<div class="tran02">
<h1>animation サンプル2</h1>
<h3>HOVERしたときrotationを使って枠を回転させてみる。<br>
回転角度を増やして、動く秒数（duration)を変更したり、背景色を<br>
変えたりするとプロペラのように回ります。</h3>
</div>
67
サンプル３：応用
TEXT シャドウと、傾斜を掛けるアニメーション
・ Transformと併用してみる。
・ Onmouseしたときskewを使って枠を傾かせるさせてみる。
CSS3記述
.tran03{
width:700px;
background-color:#FF9;
font:1px bold;
color:#090;
padding:25px;
transition: 2s ease-in-out;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
}
.tran03:hover{
font:28px bold;
color:#F00;
text-shadow: 10px 3px 15px #3300FF;
-webkit-text-shadow: 10px 3px 15px #3300FF;
-moz-text-shadow: 10px 3px 15px #3300FF;
transform: skewY(15deg);
-webkit-transform: skewY(5deg);
-moz-transform: skewY(15deg);
}
HTML記述
<div class="tran03">
<h3>animation サンプル2</h3>
<p>HOVERしたときText-shadowを使って文字に影を付ける。<br>
文字の大きさを変えたり、色も変えてみる。<br>
また、Transformのskewを使ってBOXの角度も変える。</p>
</div>
68