CSS3 Animation

CSS3において、animationプロパティと@keyframes使用することでウェブページにアニメーションを表現する方法のまとめです。 デモページ  

animationプロパティ

・animation-name: → @keyframesで指定する名前の設定。 ・animation-duration: ns → 1回のアニメーションサイクルに要する時間の設定。 ・animation-delay: ns → ページが開かれてからアニメーションを始めるまでの時間の設定 ・animation-iteration-count: n → アニメーションを繰り返す回数の設定。値をinfiniteにすることで無限に繰り返すこともできます。 ・animation-direction: → アニメーションの開始時、繰り返し時の方向の設定 normal → 順方向のアニメーションを毎回繰り返す。 reverse → 逆方向のアニメーションを毎回繰り返す。 alternate → 順方向から始まり、逆方向とを交互に繰り返す。 alternate-reverse → 逆方向から始まり、順方向とを交互に繰り返す。 複数の設定を行う場合は、animation:name duration delay iteration-count direction;の形で省略して記述することができます。  

@keyframes name

2つ以上のキーフレームを定義することが原則です。 アニメーションの始点を0%、終点を100%と表し、それぞれfrom,toで代替することもできます。  

移動

html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
animation:test 2s;
}

@keyframes test{
from{transform: translateY(0px);}
to{transform: translateY(100px);}
縦横100pxの正方形を始点から終点までに下方向に100px移動させ、その移動にかかる時間は2秒間(animation-duration: 2s;)であるというコードです。  

回転

transform:rotate(n deg) html
<div class="test"></div>
css
 .test {
width: 100px;
height: 100px;
background-color: blue;
animation: test 1s 0s 6 alternate;
}

@keyframes test {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
縦横100pxの正方形を1回転(0% {transform: rotate(0deg);}100% {transform: rotate(360deg);})させるコードです。 始点から終点までにかかる時間を1秒、ページ表示直後にアニメーションが開始され、6回順方向、逆方向を交互で繰り返すという設定です。  

拡大、縮小

transform:scale(n) html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
animation:test 2s;
}

@keyframes test {
0%{transform: scale(1);}
50%{transform: scale(5);}
100%{transform: scale(1);}
}
縦横100pxの正方形をアニメーションの中間で拡大(50%{transform: scale(5);})、終点で元のサイズに縮小(100%{transform: scale(1);})するコードです。  

フェードイン、フェードアウト

opacity: n html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
animation: test 3s  0s 3 normal;
}

 @keyframes test {
0% {opacity: 0}
100% {opacity: 1}
}
縦横100pxの正方形を透明を始点として中間でフェードインし、終点でフェードアウトするコードです。  

実行のタイミング

:hover → マウスを要素の上に乗せた時に作動 :acthive → リンクをクリック(押しっぱなし)にしている間のみ作動 :checked → チェックボックスやラジオボタンにチェックが入ったときに作動 :focus → inputなど、要素にフォーカスした時に作動 上記のプロパティにanimationプロパティを定義することで実行タイミングを設定することができます。 html
<div class="test"></div>
css
.test {
width: 100px;
height: 100px;
background-color: blue;
}

.test:hover{
animation: test 2s 0s 1;
}

@keyframes test {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
マウスが正方形の上に乗ったときに回転するソースです。  

イージング

cubic-bezier.com cubic 始めに紹介したanimationプロパティの他にanimation-timing-functionというプロパティがあり、これはキーフレームを使用する際のアニメーションの進行速度の割合を設定できるプロパティです。 上記のサイトで簡単に自由な設定ができますが、あらかじめ用意されている値もあるので、その中から使われる機会が多い値を紹介します。 ・ease cubic-bezier(0.25, 0.1, 0.25, 1.0) と同値(初期値) ・linear cubic-bezier(0.0, 0.0, 1.0, 1.0) と同値(一定) ・ease-in cubic-bezier(0.42, 0, 1.0, 1.0) と同値 ・ease-out cubic-bezier(0, 0, 0.58, 1.0) と同値 ・ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0) と同値  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です