HTML5+CSS3でサイトを作ってみる。

■ いろいろな動き

ここはwebkitを使ったサンプルページでしたが、firefoxにも対応させました。(2013/2/1)

マウスオンでアクションするサンプル

[ 角を丸く ]

サンプルhtml

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

<div class="anime01"></div>

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

.anime01{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01:hover{
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-radius-topleft: 20px;
	border-radius-topright: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-radius-bottomright: 20px;
	border-radius-bottomleft: 20px;
}

--[ TIPS ]------------------------

※上はこのように短縮できる
.anime01:hover{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius:20px;
}
[ ボーダーを変形 ]

サンプルhtml

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

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

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

.anime01a{
	background:#000;
	color:#fff;
	padding:10px;
	width:200px;
	height:10px;
	border:2px #666 dotted ;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01a:hover{
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border:5px #ccc solid ;
}
[ ゆっくり傾く ]

サンプルhtml

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

<div class="anime02"></div>

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

.anime02{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime02:hover{
	-moz-transform: skewY(-15deg);
	-webkit-transform: skewY(-15deg);
	transform: skewY(-15deg);
}
[ 普通に回転 ]

サンプルhtml

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

<div class="anime02a"></div>

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

.anime02a{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime02a:hover{
	transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}
[ 高速回転 ]

サンプルhtml

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

<div class="anime02b"></div>

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

.anime02b{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 5s ease-in-out;
	-moz-transition: 5s ease-in-out;
	transition: 5s ease-in-out;
}

.anime02b:hover{
	-moz-transform: rotate(36000deg);
	-webkit-transform: rotate(36000deg);
	transform: rotate(36000deg);
}
[ 影が出る ]

サンプルhtml

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

<div class="anime03"></div>

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

.anime03{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime03:hover{
	-moz-box-shadow: 10px 3px 15px #666;
	-webkit-box-shadow: 10px 3px 15px #666;
	box-shadow: 10px 3px 15px #666;
}
[ テキストから影 ]
テキスト

サンプルhtml

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

<div class="anime03a">テキスト</div>

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

.anime03a{
	font:25px bold;
	color:#000;
	padding:25px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime03a:hover{
	text-shadow: 10px 3px 15px #666;
}
[ 大きくなる ]
テキスト

サンプルhtml

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

<div class="anime04">テキスト</div>

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

.anime04{
	font-size:15px;
	color:#000;
	padding:25px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.anime04:hover{
	font-size:65px;
}
[ 色が変わる ]
テキスト

サンプルhtml

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

<div class="anime04a">テキスト</div>

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

.anime04a{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime04a:hover{
	color:#963;
}
[ 横に飛ばす ]
テキスト

サンプルhtml

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

<div class="anime04b">テキスト</div>

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

.anime04b{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime04b:hover{
	text-indent:-999px;
}
[ 反転 ]
テキスト

サンプルhtml

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

<div class="anime04c">テキスト</div>

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

.anime04c{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.anime04c:hover{
	-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
	transform: matrix(-1, 0, 0, 1, 0, 0);
	filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
[ 分身 ]
テキスト

サンプルhtml

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

<div class="anime04d">テキスト</div>

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

.anime04d{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.anime04d:hover{
	text-shadow:
	0 40px #396,
	0 -40px #933,
	200px 0 #669,
	-200px 0 #969;
}
[ 分身 ]
テキスト

サンプルhtml

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

<div class="anime04e">テキスト</div>

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

.anime04e{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-transition: 5s ease-in-out;
	-moz-transition: 5s ease-in-out;
	transition: 5s ease-in-out;
}

.anime04e:hover{
	text-shadow:
	0 80px #ccc,
	0 60px #999,
	0 40px #666,
	0 20px #333,
	0 -20px #333,
	0 -40px #666,
	0 -60px #999,
	0 -80px #ccc;
}
[ 背景がでる ]
テキスト

サンプルhtml

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

<div class="anime04f">テキスト</div>

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

.anime04f{
	padding-top:8px;
	text-align:center;
	color:#000;
	width:100px;
	height:22px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime04f:hover{
	background:url("../img/button.png") no-repeat;
	color:#fff;
	font-weight:bold;
	-webkit-border-radius:7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
[ 徐々に色が変わる ]
こんにちは

サンプルhtml

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

<div id="anime05">こんにちは</div>

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

div#anime05 {
	background-color: #69c;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s linear;
	-moz-transition: 1s linear;
	transition: 1s linear;
	}

div#anime05:hover {
	background-color: #9c6;
}
[ 複数のプロパティを同時に変更 ]
こんにちは

サンプルhtml

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

<div id="anime06">こんにちは</div>

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

div#anime06 {
	background-color: #69c;
	color: #000000;
	width: 100px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}

div#anime06:hover {
	background-color: #9c6;
	color: #fff;
	width: 200px;
}
[ 複数のプロパティを同時に変更 ]
* こんにちは

サンプルhtml

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

<div id="anime07">
	<img src="./img/flower.png" alt="*" title="" />
	こんにちは
</div>

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

div#anime07 {
	background-color: #69c;
	color: #000;
	width: 100px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}

div#anime07:hover {
	background-color: #9c6;
	color: #fff;
	width: 200px;
}

div#anime07 img{
	position: relative;
	top: 10px;
	left: 0;
	-webkit-transform: rotate(0deg);
	-webkit-transition: left 1s linear, -webkit-transform 1s linear;
	-moz-transform: rotate(0deg);
	-moz-transition: left 1s linear, -webkit-transform 1s linear;
	transform: rotate(0deg);
	transition: left 1s linear, -webkit-transform 1s linear;
}

div#anime07:hover img {
	left: 200px;
	-webkit-transform: rotate(720deg);
	-moz-transform: rotate(720deg);
	transform: rotate(720deg);
}
[ 背景を細かく変化させる ]
こんにちは

サンプルhtml

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

<div id="anime08">こんにちは</div>

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

div#anime08 {
	padding:5px;
	background-color: #000;
	width:100px;
	height:10px;
}
@keyframes anime08 {
	0%	{ background-color: #000; }
	20%	{ background-color: #69c; }
	40%	{ background-color: #c69; }
	60%	{ background-color: #9c6; }
	80%	{ background-color: #c66; }
	100%	{ background-color: #000; }
}
@-webkit-keyframes anime08 {
	0%	{ background-color: #000; }
	20%	{ background-color: #69c; }
	40%	{ background-color: #c69; }
	60%	{ background-color: #9c6; }
	80%	{ background-color: #c66; }
	100%	{ background-color: #000; }
}

div#anime08:hover {
	-webkit-animation: anime08 10s linear;
	animation: anime08 10s linear;
	}
[ 複数を細かく変化させる ]
こんにちは

サンプルhtml

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

<div id="anime09">こんにちは</div>

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

div#anime09	{
	width: 100px;
	background-color: #69c;
	padding: 10px;
	}

@keyframes anime09 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
@-webkit-keyframes anime09 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
 
div#anime09:hover	{
	-webkit-animation: anime09 5s linear;
	animation: anime09 5s linear;
	}
[ ループ再生を行う ]
こんにちは

サンプルhtml

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

<div id="anime10">こんにちは</div>

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

div#anime10	{
	width: 100px;
	background-color: #69c;
	padding: 10px;
	}

@keyframes anime10 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
@-webkit-keyframes anime10 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}

div#anime10:hover	{
	-webkit-animation: anime10 5s infinite;
	animation: anime10 5s infinite;
	}
[ ページ読み込み時にアニメーションスタート ]
こんにちは

サンプルhtml

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

<div id="anime11">こんにちは</div>

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

div#anime11	{
	width: 100px;
	background-color: #c69;
	padding: 10px;
	-webkit-animation: anime11 5s linear infinite;
	animation: anime11 5s linear infinite;
	}

@keyframes anime11 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}

@-webkit-keyframes anime11 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
(c) 2011-2014 naoko okihara