●トップ > 勉強中 > HTML5+CSS3 > ３回目　①ページ読み込みで動く -animation-

３回目　①ページ読み込みで動く -animation-

2014-11-17

animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向

｛animation:キーフレーム名　再生時間　補間方法　ディレイ　繰り返し　方向｝
＠keyframes キーフレーム名｛～｝

個別表示

・キーフレーム名　animation-name
・再生時間　 animation-duretion
・補間方法 animationn-timing-function
・ディレイ animation-delay(アニメ開始を遅らせる時間)
・繰り返し　animation-iteration-count
・方向　animation-direction

補間方法　animationn-timing-function

・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化

繰り返し　animation-iteration-count

・infinite　デフォルトの回数は1だがこちらを指定すると永遠に繰り返し実行される
・回数

方向　animation-direction

・normal　順方向（時計回り）　初期値
・alternate　奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse　逆回り
・alternate-reverse　初回のアニメーションは逆方向に実行し、次は順方向

ゆっくり傾く

© 引用サイト⇒nemuchan.comさまサイトより

--[ html ]-----------------------

<div class="anime11"></div>

--[ CSS ]------------------------

.anime11{
	background:#003d84;
	color:#fff;
	margin:25px 0;
	width:100px;
	height:10px;
	-moz-animation:anime11 5s infinite alternate linear;
	-webkit-animation:anime11 5s infinite alternate linear;
	animation:anime11 5s infinite alternate linear;
}
@-webkit-keyframes anime11{
	0%	{}
	100%	{-webkit-transform: skewY(-15deg);}
}
@keyframes anime11{
	0%	{}
	100%	{transform: skewY(-15deg);}
}
応用・・・波
--[ html ]-----------------------

<div class="animation-nami"></div>

--[ CSS ]------------------------

.animation-nami{
width:100%; 
height:30px; 
z-index:10; 
left:0; 
bottom:0; 
background-image:url(images/nami.png);
}

.animation-nami {
-webkit-backface-visibility: hidden;
-webkit-animation: ugokunami 15s linear infinite 0s;
-moz-animation: ugokunami 15s linear infinite 0s;
-o-animation: ugokunami 15s linear infinite 0s;
-ms-animation: ugokunami 15s linear infinite 0s;
animation: ugokunami 15s linear infinite 0s;
}

@-webkit-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-moz-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-o-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@-ms-keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}
@keyframes ugokunami {
0% { background-position:right bottom;}
50% { background-position:left bottom;}
100% { background-position:right bottom;}
}