css3 2D Transform

CSS3 トランジション

CSS3
Transition

<!DOCTYPE html>
<html>
<head>
<style> 
.animated_div{
	width:60px;
	height:40px;
	background:#92B901;
	color:#ffffff;
	position:absolute;
	font-weight:bold;
	font-size:15px;
	padding:10px;
	float:left;
	margin:5px;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
	-webkit-border-radius:5px;
	-o-transition-property:width,height,-o-transform,background,font-size,opacity;
	-o-transition-duration:1s,1s,1s,1s,1s,1s;
	-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
	-moz-transition-duration:1s,1s,1s,1s,1s,1s;
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;
	border-radius:5px;
	opacity:0.4;
}
.animated_div:hover{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	opacity:1;
	background:#1ec7e6;
	width:90px;
	height:60px;
	font-size:30px;
}
</style>
</head>
<body>
<h3>CSS3 トランジション</h3>
<div style="height:100px;">
<div class="animated_div">CSS3<br><span style="font-size:50%;">Transition</span></div>
</div>
</body>
</html>

トランジション - :hover

青い四角の上にマウスポインタを乗せてください。

<!DOCTYPE html>
<html>
<head>
<style> 
div#trans{
	width:100px;
	height:100px;
	background-color:#3399FF;
	-webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
	transition:width 2s;
}
div#trans:hover{
	width:300px;
}
</style>
</head>
<body>
<h3>トランジション - :hover</h3>
<div id="trans"></div>
<p>青い四角の上にマウスポインタを乗せてください。</p>
</body>
</html>

トランジション - 幅、高さ、変形方法の指定

青い四角の上にマウスポインタを乗せてトランジション効果をご覧ください！

<!DOCTYPE html>
<html>
<head>
<style> 
div#multi{
	width:120px;
	height:120px;
	background-color:#3399FF;
	-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
	transition:width 2s, height 2s, transform 2s;}
div#multi:hover{
width:200px;
	height:200px;
	-webkit-transform:rotate(180deg); /* Safari */
	transform:rotate(180deg);
}
</style>
</head>
<body>
<h3>トランジション - 幅、高さ、変形方法の指定</h3>
<div id="multi">青い四角の上にマウスポインタを乗せてトランジション効果をご覧ください！</div>
</body>
</html>

トランジション - プロパティを全指定

青い四角の上にマウスポインタを乗せてください。

注：トランジション効果がスタートするまで2秒かかりますのでご注意ください。

<!DOCTYPE html>
<html>
<head>
<style> 
div#all{
	width:100px;
	height:100px;
	background-color:#3399FF;
	/* For Safari 3.1 to 6.0 */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
	/* Standard syntax */
	transition-property:width;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
}
div#all:hover{
	width:200px;
}
</style>
</head>
<body>
<h3>トランジション - プロパティを全指定</h3>
<p>青い四角の上にマウスポインタを乗せてください。</p>
<p><strong>注：</strong>トランジション効果がスタートするまで2秒かかりますのでご注意ください。</p>
</body>
</html>

ショーハンド・プロパティを使用する場合は、以下のようになります。

div#all{
  width:100px;
  height:100px;
  background-color:#3399FF;
  -webkit-transition:width 1s linear 2s; /* For Safari 3.1 to 6.0 */
  transition:width 1s linear 2s;
}

戻るホーム次へ