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

■ 回転・移動

普通に回転

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

<div class="anime01">
	<img src="./img/heart.png" />
</div>

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

.anime01 {
	width:55px;
	height:44px;
	-webkit-animation: anime01 2s linear infinite;
	animation: anime01 2s linear infinite;
}
@-webkit-keyframes anime01 {
	0%	{ -webkit-transform: rotate(-0deg); }
	100%	{ -webkit-transform :rotate(360deg); }
}
@keyframes anime01 {
	0%	{ transform: rotate(-0deg); }
	100%	{ transform :rotate(360deg); }
}

X方向に回転

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

<div class="anime02">
	<img src="./img/heart.png" />
</div>

--[ CSS ]------------------------
.anime02 {
	width:55px;
	height:44px;
	-webkit-animation: anime02 2s linear infinite;
	animation: anime02 2s linear infinite;
}

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

Y方向に回転

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

<div class="anime03">
	<img src="./img/heart.png" />
</div>

--[ CSS ]------------------------
.anime03 {
	width:55px;
	height:44px;
	-webkit-animation: anime03 2s linear infinite;
	animation: anime03 2s linear infinite;
}

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

ジグザグ移動

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

<div class="anime04">
	<img src="./img/heart.png" />
</div>

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

.anime04 {
	width:55px;
	height:44px;
	-webkit-animation: anime04 2s linear infinite;
	animation: anime04 2s linear infinite;
}

@-webkit-keyframes anime04 {
	0%	{ -webkit-transform: translate(0px,0); }
	20%	{ -webkit-transform: translate(20px,10px); }
	40%	{ -webkit-transform: translate(40px,-10px); }
	60%	{ -webkit-transform: translate(60px,10px); }
	80%	{ -webkit-transform: translate(80px,-10px); }
	100%	{ -webkit-transform: translate(100px,10px); }
}
@keyframes anime04 {
	0%	{ transform: translate(0px,0); }
	20%	{ transform: translate(20px,10px); }
	40%	{ transform: translate(40px,-10px); }
	60%	{ transform: translate(60px,10px); }
	80%	{ transform: translate(80px,-10px); }
	100%	{ transform: translate(100px,10px); }
}

回転＋移動

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

<div class="anime05">
	<img src="./img/heart.png" />
</div>

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

.anime05 {
	width:55px;
	height:44px;
	-webkit-animation: anime05 2s linear infinite;
	animation: anime05 2s linear infinite;
}

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

回転＋移動

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

<div class="anime06">
	<img src="./img/heart.png" />
</div>

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

.anime06 {
	width:55px;
	height:44px;
	-webkit-animation: anime06 2s linear infinite;
	animation: anime06 2s linear infinite;
}

@-webkit-keyframes anime06 {
	0%	{ -webkit-transform: translate(0,0) rotate(0deg); }
	100%	{ -webkit-transform: translate(240px,0) rotate(360deg); }
}
@keyframes anime06 {
	0%	{ transform: translate(0,0) rotate(0deg); }
	100%	{transform: translate(240px,0) rotate(360deg); }
}

ゆれながら移動

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

<div id="anime07">
	<img src="./img/heart.png" />
</div>

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

div#anime07 > img {
	position:relative;
	top:0;
	left:0;
	-webkit-animation:anime07 10s infinite alternate linear;
	animation:anime07 10s infinite alternate linear;
}
@-webkit-keyframes anime07{
	0%	{left:0;	-webkit-transform: rotate(0deg);}
	20%	{left:20px;	-webkit-transform: rotate(-10deg);}
	40%	{left:40px;	-webkit-transform: rotate(10deg);}
	60%	{left:60px;	-webkit-transform: rotate(0deg);}
	80%	{left:80px;	-webkit-transform: rotate(-10deg);}
	100%	{left:100px;	-webkit-transform: rotate(10deg);}
}
@keyframes anime07{
	0%	{left:0;	transform: rotate(0deg);}
	20%	{left:20px;	transform: rotate(-10deg);}
	40%	{left:40px;	transform: rotate(10deg);}
	60%	{left:60px;	transform: rotate(0deg);}
	80%	{left:80px;	transform: rotate(-10deg);}
	100%	{left:100px;	transform: rotate(10deg);}
}

3D効果を出す

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

<div id="anime08">
	<img src="./img/bg-berries.jpg" />
</div>

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

@-webkit-keyframes anime08{
	0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
	45% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
	55% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
	100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}

div#anime08{
	-webkit-perspective: 100px;

}
div#anime08 > img {
	-webkit-transform-style: preserve-3d;
/*	-webkit-backface-visibility: hidden;*/
	width:100px;
	-webkit-animation:anime08 5s infinite alternate linear;
}