4回目 ②ページ読み込みで動く/要素を回転表示する -transform:rotate-

2014-11-17
@keyframes キーフレーム名{
  0% { transform: rotate(角度deg);}
100% { transform: rotate(角度deg);}
}

個別表示

・transform:rotate() ()要素を回転表示する

補間方法 animationn-timing-function

・normal 順方向(時計回り)初期値
・alternate 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す
・reverse 逆回り ←一部動かないなどの不具合有
・alternate-reverse 初回のアニメーションは逆方向に実行し、次は順方向

角度 deg

・deg 角度

補間方法 animationn-timing-function

・rotate(回転角度) rotate()関数では、角度によって2D回転を指定します。
・rotateX(回転角度)  X軸を軸とする角度によって時計回りの回転を指定します。
・rotateY(回転角度)  Y軸を軸とする角度によって時計回りの回転を指定します。
・rotateZ(回転角度)  Z軸を軸とする角度によって時計回りの回転を指定します。
・rotate3d(数値, 数値, 数値, 回転角度)

回る

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

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

<div class="anime01a"></div>

--[ CSS ]------------------------
.anime01a{
	background:#000;
	color:#fff;
	width:100px;
	height:10px;
	margin:40px 0;
	-webkit-animation:anime01a 5s infinite alternate;
	animation:anime01a 5s infinite alternate;
}

@-webkit-keyframes anime01a{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes anime01a{
	0%	{}
	100%	{transform: rotate(360deg);}
}
回るイルカ
--[ html ]-----------------------

<div class="iruka"></div>

--[ CSS ]------------------------
{animation:キーフレーム名 再生時間 補間方法 ディレイ 繰り返し 方向}
@keyframes キーフレーム名{~}

.iruka{ 
background:url(images/iruka1.png);
width:160px;
height:160px;
margin:40px 0;
-webkit-animation:irukamawaru 5s linear infinite normal;
animation:irukamawaru 5s linear infinite normal;
}

@-webkit-keyframes irukamawaru{
	0%	{}
	100%	{-webkit-transform: rotate(360deg);}
}
@keyframes irukamawaru{
	0%	{}
	100%	{transform: rotate(360deg);}
}