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

■ いろいろな動き02

自動再生編（hover機能の無いスマートフォン用）

サンプルhtml

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

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

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

.anime01{
	background:#000;
	color:#fff;
	margin:25px 0;
	width:100px;
	height:10px;
	-moz-animation:anime01 5s infinite alternate linear;
	-webkit-animation:anime01 5s infinite alternate linear;
	animation:anime01 5s infinite alternate linear;
}
@-webkit-keyframes anime01{
	0%	{}
	100%	{-webkit-transform: skewY(-15deg);}
}
@keyframes anime01{
	0%	{}
	100%	{transform: skewY(-15deg);}
}

サンプルhtml

--[ 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

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

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

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

.anime02{
	background:#000;
	color:#fff;
	width:100px;
	height:10px;
	margin:40px 0;
	-webkit-animation:anime02 5s infinite alternate linear;
	animation:anime02 5s infinite alternate linear;
}
@-webkit-keyframes anime02{
	0%	{}
	100%	{-webkit-transform: rotate(36000deg);}
}
@keyframes anime02{
	0%	{}
	100%	{transform: rotate(36000deg);}
}

サンプルhtml

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

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

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

.anime03{
	background:#000;
	color:#fff;
	width:100px;
	height:10px;
	margin:25px 0;
	-webkit-animation:anime03 5s infinite alternate linear;
	animation:anime03 5s infinite alternate linear;
}

@-webkit-keyframes anime03{
	0%	{}
	100%	{-webkit-box-shadow: 10px 3px 15px #666;}
}
@keyframes anime03{
	0%	{}
	100%	{box-shadow: 10px 3px 15px #666;}
}

サンプルhtml

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

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

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

.anime03a{
	font:25px bold;
	color:#000;
	padding:25px;
	-webkit-animation:anime03a 5s infinite alternate linear;
	animation:anime03a 5s infinite alternate linear;
}
@-webkit-keyframes anime03a{
	0%	{}
	100%	{text-shadow: 10px 3px 15px #000;}
}
@keyframes anime03a{
	0%	{}
	100%	{text-shadow: 10px 3px 15px #000;}
}

サンプルhtml

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

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

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

.anime04{
	font-size:15px;
	color:#000;
	padding:25px;
	-webkit-animation:anime04 5s infinite alternate linear;
	animation:anime04 5s infinite alternate linear;
}

@-webkit-keyframes anime04{
	0%	{}
	100%	{font-size:65px;}
}
@keyframes anime04{
	0%	{}
	100%	{font-size:65px;}
}

サンプルhtml

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

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

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

.anime04a{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-animation:anime04a 10s infinite alternate linear;
	animation:anime04a 10s infinite alternate linear;
}
@-webkit-keyframes anime04a{
	0%	{}
	100%	{color:#600;}
}
@keyframes anime04a{
	0%	{}
	100%	{color:#600;}
}

サンプルhtml

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

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

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

.anime04b{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-animation:anime04b 5s infinite alternate linear;
	animation:anime04b 5s infinite alternate linear;
	}

@-webkit-keyframes anime04b{
	0%	{}
	100%	{text-indent:-999px;}
}
@keyframes anime04b{
	0%	{}
	100%	{text-indent:-999px;}
}

サンプルhtml

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

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

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

.anime04c{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-animation:anime04c 1s infinite alternate linear;
	animation:anime04c 1s infinite alternate linear;
}
@-webkit-keyframes anime04c{
	0%	{}
	100%	{-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);}
}

@keyframes anime04c{
	0%	{}
	100%	{
		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-animation:anime04d 1s infinite alternate linear;
	animation:anime04d 1s infinite alternate linear;
}
@-webkit-keyframes anime04d{
	0%	{}
	50%	{
		text-shadow:
		0 -40px #999,
		200px 0 #666;
		}
	100%	{
		text-shadow:
		0 40px #ccc,
		-200px 0 #333;
		}
}
@keyframes anime04d{
	0%	{}
	50%	{
		text-shadow:
		0 -40px #999,
		200px 0 #666;
		}
	100%	{
		text-shadow:
		0 40px #ccc,
		-200px 0 #333;
		}
}

サンプルhtml

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

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

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

.anime04e{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-animation:anime04e 1s infinite alternate linear;
	animation:anime04e 1s infinite alternate linear;
}

@-webkit-keyframes anime04e{
	0%	{}
	100%	{
		text-shadow:
		0 60px #ccc,
		0 -60px #ccc;
		}
}
@keyframes anime04e{
	0%	{}
	100%	{
		text-shadow:
		0 60px #ccc,
		0 -60px #ccc;
		}
}

サンプルhtml

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

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

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

.anime04f{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-animation:anime04f 5s infinite alternate linear;
	animation:anime04f 5s infinite alternate linear;
}

@-webkit-keyframes anime04f{
	0%	{}
	100%	{
	background:#ccc;
	-webkit-border-radius:20px;
		}
}
@keyframes anime04f{
	0%	{}
	100%	{
	background:#ccc;
	border-radius:20px;
		}
}