CSS3で追加されたアニメーション・エフェクト関連仕様
アニメーション、エフェクトなどの効果はjavascriptやFlashを使用していましたがCSS3では次の仕様が追加され、それに伴いCSSの記述のみで様々なアニメーション効果、2D・3Dアニメーション効果を指定することが可能になり、スクリプトを使用せずCSSの簡易なコーディングにより動的なサイト制作が可能になりました。
詳細について確認はW3Cサイトにてご確認をお願いします。
- [CSS3 2D transformの仕様]
-
- CSS3 2D transforms
- [CSS3 animations Module Level3の仕様]
-
- CSS3 animations Module Level3
- [CSS3 transforms Module Level3]
- CSS3 transforms Module Level3
HTML5/CSS3のアニメーションオーサリングツールとしてはADOBE EDGEが使用されています。
- [ADOBE EDGE]
-
- Adobe Edge
CSS3で追加されたプロパティ―transorm/transition
transformプロパティ
CSS3には特殊効果の仕様が追加され、CSSの記述だけでオブジェクトのアニメーション、3D効果、スライドショーなどのエフェクト効果を簡単に実行することができるようになりました。
transformでは対象とする要素に対し、移動、回転などのエフェクト効果をつけることができます。transformプロパティの記述方法はのように記述を行います。
transformプロパティの記述
transform:scale(X方向へ拡大,Y方向へ拡大)rotate(回転する角度degで指定)translate(X軸方向へ移動、pxで指定,Y方向へ移動)skew(X軸、Ｙ軸に歪み、degで指定);
例えばtransform:scale(2,2)rotate(360deg)translate(500px,0);ではScaleでX軸方向へ2倍拡大・Y軸方向へ2倍拡大を指定、roteteで360度回転を指定、translateでX軸方向へ500px移動を行っています。
次にtransformプロパティの値について説明します。transformプロパティには以下の値があります。
scale
X方向・Y方向へ拡大、縮小を指定します。単位はptを使用します
rotate
回転する角度を指定します。単位はdegを使用します。
translate
X軸方向・Y方向へ移動を指定します。単位はptを使用します。
skew
X軸方向・Y方向への歪みを指定します。単位はdegを使用します。
CSS記述方法
次の例では下のボールに動きをつけてみました。ボールにマウスポイントを近づけることで動きだします。
以下、HTML/CSS記述内容です。IE、Cromeでのブラウザ指定を行っている為、重複した記述があります
HTML記述
<ul id="transform">
<li class="listyle" id="ball1"><a href="#"><img src="image/ball.gif"></a></li>
<li class="listyle" id="ball2"><a href="#"><img src="image/ball.gif"></a></li>
<li class="listyle" id="ball3"><a href="#"><img src="image/ball.gif"></a></li>
<li class="listyle" id="ball4"><a href="#"><img src="image/ball.gif"></a></li>
</ul>
CSS記述
#ball1:hover{
-webkit-transform:scale(100,100)rotate(360deg)translate(500px,0);
-webkit-transition:all 1s ease-in-out;
transform:scale(100,100)rotate(360deg)translate(500px,0);
transition:all 1s ease-in-out;
}
#ball2:hover{
-webkit-transform:scale(0,0)rotate(180deg)translate(-200px,0);
-webkit-transition:all 1s ease-in-out;
transform:scale(0,0)rotate(180deg)translate(-200px,0);
transition:all 1s ease-in-out;
}
#ball3:hover{
-webkit-transform:scale(1,1)rotate(0deg)translate(900px,100px);
-webkit-transition:all 0.7s ease-in-out;
transform:scale(1,1)rotate(0deg)translate(900px,100px);
transition:all 0.7s ease-in-out;
}
#ball4:hover{
-webkit-transform:scale(1,1)rotate(0deg)translate(-600px,0)skew(180deg);
-webkit-transition:all 0.7s ease-in-out;
transform:scale(1,1)rotate(0deg)translate(-600px,0)skew(180deg);
transition:all 0.7s ease-in-out;
}
transitionプロパティ
transitionプロパティでは変化の仕方を設定します。次のように記述します。
transtionプロパティの記述
transition:変化させるプロパティ名の指定、限定しない場合はall 変化かかる時間;
値には次の値があります。
transition-property
transition-propertyによって変化させる対象のプロパティを指定することができます。限定して変化をさせるにはプロパティ名でそのプロパティを指定しコンマ区切りで複数指定することも可能です。限定させない場合にはallを使用します。
transition-duration
transition-durationでは変化が行う時間を指定、アニメーションにかける時間を指定します。単位はs(秒)かms(ミリ秒）で行います
transition-delay
transition-delayでは変化が始まる時間を指定を指定します。単位はs(秒)かms(ミリ秒）で行います
transition-timing-function
transition-timing-functionではアニメーションの変化の速度の仕方を設定します。
次の例ではタブにtrasisionプロパティを使用して変化速度を設定しています。以下、例文を記述します。
- お気に入り
- テスト
- テストメニュー
- テストメニュー
以下、HTML/CSS記述内容です。
HTML記述
<dl id="dlstyle">y
<dd id="dditem1" ><a href="#お気に入り">お気に入り</a></dd>
<dd id="dditem2" ><a href="#">テスト</a></dd>
<dd id="dditem3" ><a href="#">テストメニュー</a></dd>
<dd id="dditem4" ><a href="#">テストメニュー</a></dd>
</dl>
CSS記述
#dditem1{
float: left;
margin:0;
border-radius:10px 10px 0 0;
background-color: #E9E9E9;
border: thin #C8C8C8 solid;
text-align: center;
width: 130px;
padding: 5px;
height: 20px;
}
#dditem1:hover{
-webkit-transform:scale(1,1.2)translate(0,-2px);
transform:scale(1,1.2)translate(0,-2px);
background-color: #9900cc;
transition:all 0.7s;
}
#dditem2{
float: left;
margin:0;
border-radius:10px 10px 0 0;
background-color: #E9E9E9;
border: thin #C8C8C8 solid;
text-align: center;
width: 130px;
padding: 5px;
height: 20px;
}
#dditem2:hover{
-webkit-transform:scale(1.2,1);
transform:scale(1.2,1);
background-color: #33cc99;
transition:all 1s;
}
#dditem3{
float: left;
margin:0;
border-radius:10px 10px 0 0;
background-color: #E9E9E9;
border: thin #C8C8C8 solid;
text-align: center;
width: 130px;
padding: 5px;
height: 20px;
}
#dditem3:hover{
-webkit-transform:scale(1,1.3)translate(0,-3px);
transform:scale(1,1.3)translate(0,-3px);
background-color: #ffffff;
}
#dditem4{
float: left;
margin:0;
border-radius:10px 10px 0 0;
background-color: #E9E9E9;
border: thin #C8C8C8 solid;
text-align: center;
width: 130px;
padding: 5px;
height: 20px;
}
#dditem4:hover{
-webkit-transform:scale(1,1.3)translate(0,-3px);
transform:scale(1,1.3)translate(0,-3px);
background-color: #ff9933;
transition:all 1s;
}
CorporateSite