|
アニメーションのプロパティを使用してマーキータグのように文字や画像を移動させることができます。
CSSファイルには「@keyframes クラス名」もセットで指定します。
アニメーションのプロパティは以下の通りです。
| アニメーションのプロパティ |
説明 |
|
animation-name
|
アニメーションの名前を付ける。 |
|
animation-duration
|
1回のアニメーションの時間を指定する。 |
|
animation-timing-function
|
アニメーションの変化の進行度を指定する。
ease・・・開始と終了を滑らかにする 初期値
linear・・・一定の速さで再生する
ease-in・・・ゆっくり始まる
ease-out・・・ゆっくり終わる
ease-in-out・・・ゆっくり始まりゆっくり終わる
cubic-bezier(X1,X2,Y1,Y2)・・・3次ベジェ曲線で４つの数値(0～1）で指定する
|
|
animation-iteration-count：値
|
アニメーションを繰り返す回数を指定する。値は
infinite・・・無制限に繰り返す
数値・・・1や5等の数字で指定
|
|
translate()
|
どの方向に移動するかを指定する。
X方向はマイナスの値にすると左方向へ移動する
Y方向はマイナスの値にすると上方向へ移動する
from{transform:translate(0px);}
to{transform:translate(100px);}
この例では
fromが0から、toが100pxまでという意味になります。
translate(値)・・・左右の移動距離を指定する
translateX(値)・・・左右の移動距離を指定する
translateY(値)・・・上下の移動距離を指定する
translate(値1、値2)・・・値1が左右の、値2が上下の移動距離を指定する
|
|
animation-delay：値
|
アニメーションを開始する遅延時間を指定する。値は
5sなどの時間で指定する
|
|
animation-direction：値
|
アニメーションを再生する方向を指定する。値は
nomal・・・アニメーションを左から右に再生する
reverse・・・アニメーションを右から左に再生する
alternate・・・奇数回目の再生では左から右方向へ、偶数回目の再生では右から左方向
になる
alternate-reverse・・・奇数回目の再生では右から左方向へ、偶数回目の再生では左から右方向
になる
|
【ブラウザ表示】
こんにちは。今日はいい天気ですね。
以下は上記プロパティを使用した際のブラウザ表示例です
| HTMLソース |
ブラウザ表示 |
<div class="idou">
スタートとラストは滑らかに
</div> |
スタートとラストは滑らかに |
<div class="idou2">
一定の速さで再生する
</div> |
一定の速さで再生する |
<div class="idou3">
スタートはゆっくり
</div> |
スタートはゆっくり |
<div class="idou4">
画像
</div> |
ゆっくり終わる |
<div class="idou5">
画像
</div> |
ゆっくり始まりゆっくり終わる |
<div class="idou6">
画像
</div> |
3回の移動で終わる |
<div class="idou7">
画像
</div> |
左から右（X方向）に70%移動 |
<div class="idou8">
画像
</div> |
上から下（Y方向）に50%移動 |
<div class="idou9">
画像
</div> |
右へ50px、下へ50px移動 |
<div class="idou10">
画像
</div> |
5秒経過してから右へ70％移動 |
<div class="idou11">
画像
</div> |
右から左へ70％移動 |
<div class="idou12">
画像
</div> |
奇数回目では左から右方向へ70%、偶数回目で右から左方向に70%移動 |
<div class="idou13">
画像
</div> |
奇数回目では右から左方向へ70%、偶数回目で左から右方向に70%移動 |
CSSの外部ファイル
/* スタートとラストは滑らかに */
div.idou{
width:500px;
animation-name:idou;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes idou{
from{transform:translate(0%);}
to{transform:translate(70%);}
}
/* 一定の速さで再生する */
div.idou2{
width:500px;
animation-name:idou2;
animation-duration:5s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes idou2{
from{transform:translate(0%);}
to{transform:translate(70%);}
}
/* スタートはゆっくり */
div.idou3{
width:500px;
animation-name:idou3;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
}
@keyframes idou3{
from{transform:translate(0%);}
to{transform:translate(70%);}
}
/* ゆっくり終わる */
div.idou4{
width:500px;
animation-name:idou4;
animation-duration:5s;
animation-timing-function:ease-out;
animation-iteration-count:infinite;
}
@keyframes idou4{
from{transform:translate(0%);}
to{transform:translate(70%);}
}
/* ゆっくり始まりゆっくり終わる */
div.idou5{
width:500px;
animation-name:idou5;
animation-duration:5s;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
}
@keyframes idou5{
from{transform:translate(0%);}
to{transform:translate(70%);}
}
/* 3回の移動で終わる */
div.idou6{
width:500px;
animation-name:idou6;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:3;
}
@keyframes idou6{
from{transform:translate(0%);}
to{transform:translate(70%);}
}
/* translateX */
div.idou7{
width:500px;
animation-name:idou7;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes idou7{
100%{transform:translateX(70%);}
}
/* translateY */
div.idou8{
width:500px;
animation-name:idou8;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes idou8{
100%{transform:translateY(50%);}
}
/* X方向、Y方向 */
div.idou9{
width:500px;
animation-name:idou9;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes idou9{
100%{transform:translate(50px,50px);}
}
/* 5秒経過してから右へ */
div.idou10{
width:500px;
animation-name:idou10;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-delay：5s;
}
@keyframes idou10{
100%{transform:translate(70%,0px);}
}
/* 右から左へ */
div.idou11{
width:500px;
animation-name:idou11;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction:reverse;
}
@keyframes idou11{
100%{transform:translate(70%,0px);}
}
/* 奇数回目では左から右方向へ70%、偶数回目で右から左方向に */
div.idou12{
width:500px;
animation-name:idou12;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes idou12{
100%{transform:translate(70%,0px);}
}
/* 奇数回目では右から左方向へ70%、偶数回目で左から右方向に */
div.idou13{
width:500px;
animation-name:idou13;
animation-duration:5s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction:alternate-reverse;
}
@keyframes idou13{
100%{transform:translate(70%,0px);}
}
■ その他の項目
・アニメーション-回転
スタイルシート一覧のページに戻る
|
