うにょうにょ

f:id:K396_109:20130730205023p:plain

これの一番下の

f:id:K396_109:20130730205058p:plain

↑ここの部分
まるいのはまだだけど@keyframesの課題として作った結果

これになりました

そのコードをちょっとだけめも

HTML

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>unyo</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<link rel="stylesheet" href="unyo.css" media="all" />
</head>
<body>

	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
	<div id="box4"></div>
	<div id="box5"></div>
	<div id="box6"></div>
	<div id="box7"></div>
	<div id="box8"></div>
	<div id="box9"></div>
	<div id="box10"></div>
	<div id="box11"></div>
	<div id="box12"></div>
	<div id="box13"></div>
	<div id="box14"></div>
	<div id="box15"></div>
	
</body>
</html>


CSSを一部だけ

body{
		width: 100%;
		height: 100%;
	}
	
/* ----------8<----------8<--------------------8<----------8<---------- */

	
#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: 30px;
}
	
@-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, #aaffa7),
	color-stop(0.5, #aaffa7),
	color-stop(0.5, #4a964a),
	color-stop(1.0, #4a964a)
	);
}
	
}

@-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, #aaffa7),
	color-stop(0.5, #aaffa7),
	color-stop(0.5, #4a964a),
	color-stop(1.0, #4a964a)
	);
}
	
}

@-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, #aaffa7),
	color-stop(0.5, #aaffa7),
	color-stop(0.5, #4a964a),
	color-stop(1.0, #4a964a)
	);
}
	
}

なぜ全部色変えたのか後悔...
idを全部classに変えてやればよかった...


再び風邪気味なのではよ帰って寝ましょう