アニメーションのプロパティを使用してマーキータグのように文字や画像を移動させることができます。 CSSファイルには「@keyframes クラス名」もセットで指定します。

アニメーションのプロパティは以下の通りです。

【ブラウザ表示】

以下は上記プロパティを使用した際のブラウザ表示例です

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);}
}

■ その他の項目

スタイルシート一覧のページに戻る