にょんにょん

にょんにょんって動くやつのソースメモ

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>

	<div id="box1"></div>
	<div id="box2"></div>
	
	
	<style>
body{
		width: 100%;
		height: 100%;
	}
	
#box1{
	-moz-animation-name: anime1;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction:alternate;
	
	-webkit-animation-name: anime1;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate;
	
	-o-animation-name: anime1;
	-o-animation-duration: 3s;
	-o-animation-timing-function: ease;
	-o-animation-iteration-count: infinite;
	-o-animation-direction:alternate;
	
	-ms-animation-name: anime1;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction:alternate;
	position: absolute;
	bottom: 0;
	float: left;
	margin-left: 80px;
}
	
@-moz-keyframes anime1{
0%{
	margin-top: 50px;
	height: 150px;
	width: 50px;
}

100%{
	height: 200px;
	width: 50px;
	background: #aaf;
	background-color: rgb(102, 102, 102);
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(  0, #e049d6),
	color-stop(0.5, #ed4ee2),
	color-stop(0.5, #418af0),
	color-stop(1.0, #3c81e0)
	);
}
	
}

@-webkit-keyframes anime1{
0%{
	margin-top: 50px;
	height: 150px;
	width: 50px;
}

100%{
	height: 200px;
	width: 50px;
	background: #aaf;
	background-color: rgb(102, 102, 102);
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(  0, #e049d6),
	color-stop(0.5, #ed4ee2),
	color-stop(0.5, #418af0),
	color-stop(1.0, #3c81e0)
	);
}
	
}

@-o-keyframes anime1{
0%{
	margin-top: 50px;
	height: 150px;
	width: 50px;
}

100%{
	height: 200px;
	width: 50px;
	background: #aaf;
	background-color: rgb(102, 102, 102);
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(  0, #e049d6),
	color-stop(0.5, #ed4ee2),
	color-stop(0.5, #418af0),
	color-stop(1.0, #3c81e0)
	);
}
	
}

#box2{
	-moz-animation-name: anime2;
	-moz-animation-duration: 1.5s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction:alternate;
	
	-webkit-animation-name: anime2;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate;
	
	-o-animation-name: anime2;
	-o-animation-duration: 1.5s;
	-o-animation-timing-function: ease;
	-o-animation-iteration-count: infinite;
	-o-animation-direction:alternate;
	
	-ms-animation-name: anime2;
	-ms-animation-duration: 1.53s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction:alternate;
	position: absolute;
	bottom: 0;
	float: left;
}
	
@-moz-keyframes anime2{
0%{
			margin-top: 50px;
			height: 100px;
			width: 70px;
}

100%{
			height: 150px;
			width: 70px;
			background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(  0, #344b91),
			color-stop(0.5, #344b91),
			color-stop(0.5, #2b2b2b),
			color-stop(1.0, #2b2b2b)
			);
}
	
}

@-webkit-keyframes anime2{
0%{
			margin-top: 50px;
			height: 100px;
			width: 70px;
}

100%{
			height: 150px;
			width: 70px;
			background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(  0, #344b91),
			color-stop(0.5, #344b91),
			color-stop(0.5, #2b2b2b),
			color-stop(1.0, #2b2b2b)
			);
}
	
}

@-o-keyframes anime2{
0%{
			margin-top: 50px;
			height: 100px;
			width: 70px;
}

100%{
			height: 150px;
			width: 70px;
			background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(  0, #344b91),
			color-stop(0.5, #344b91),
			color-stop(0.5, #2b2b2b),
			color-stop(1.0, #2b2b2b)
			);
}
	
}

@-moz-keyframes anime2{
0%{
			margin-top: 50px;
			height: 100px;
			width: 70px;
}

100%{
			height: 150px;
			width: 70px;
			background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(  0, #344b91),
			color-stop(0.5, #344b91),
			color-stop(0.5, #2b2b2b),
			color-stop(1.0, #2b2b2b)
			);
}
	
}

</style>
	

</body>
</html>