もがきながらのオレオレコーディング

以前、社内で出されていた宿題
最初僕は関わっていなかったのですが、それの発表を聞いている内に作成してみたくなったので簡易的なものですが作ってみました
（Chromeで見てね♡）
どうせならみんなが使っていない方法でと思ったので、できるだけCSSで作成してみようとしてみました
幅とかの数値は時々によって変わるので、それを変数管理すれば楽じゃね？ってことでsass使ってます

//.sass
$radius: 50px; //円の半径
$margin: 10px; //隣とのマージン
$n: 4; //最初見せる個数
$time: 3.0s; //ループさせる時間
$ww: ((($radius*2)+$margin)*$n)-$margin; //ガワのwidth

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
}

div#wrap {
	width: $ww;
	height: $radius*2;
	border: 1px #FF0000 solid;
	overflow: hidden;
	margin: 200px auto 0;
	padding: 0;

	ul {
		width: ($ww+$margin)*2;
		height: $radius*2;
		list-style: none;
		margin: 0;
		padding: 0;
		-webkit-animation-name: 'loop';
		-webkit-animation-duration: $time;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		
		li {
			float: left;
			width: $radius*2;
			height: $radius*2;
			border-radius: $radius;
			margin: 0 $margin 0 0;
		}
	}
}

@-webkit-keyframes 'loop' {
  0% { 
    -webkit-transform: translate(0,0);
  }
  100% { 
    -webkit-transform: translate(-($ww+$margin),0);
  }
}

//.css
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

div#wrap {
  width: 430px;
  height: 100px;
  border: 1px #FF0000 solid;
  overflow: hidden;
  margin: 200px auto 0;
  padding: 0;
}
div#wrap ul {
  width: 880px;
  height: 100px;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-animation-name: 'loop';
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
div#wrap ul li {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin: 0 10px 0 0;
}

@-webkit-keyframes 'loop' {
  0% {
    -webkit-transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(-440px, 0);
  }
}

	

		
1
		
2
		
3
		
4
	

こんな感じ
本来は全体の幅が決まっているので、そこから計算してはみ出す場合のみ動くようにしてやらないと行けないんでしょうが。。。
そのへんは今後の宿題ということですね
このまま左に流すと全部出きってしまうと何もない状態がしばらく続いてしまうので、
同じものをjsで複製して連続的に並んでいるようにします

リストの最後にclass=”last”をつけてその後ろに同じ物をくっつけてそのクラスを消す、ただそれだけ・笑
最初に変数として円の半径や隣とのマージンを入れてやれば上手いこと行くようにしてみました
実際コーディングする時は外側の幅は決まっていて、しかもそこから計算してリスト並べるわけやから
同じ事をやっているだけっすな
ってそこが本題ではなく。。。

css3のanimation

今回のメインはanimation、css3で実装された機能でござい
詳しく説明、、、と言いたいところですが自分自身まだまだ勉強中な身でして
完全に説明が出来ん！ってことで使ったところだけの説明ですｽﾏｿm(_ _)m

animation指定

まずは↓この部分

  -webkit-animation-name: 'loop';
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;

これ以外には
animation-delay：アニメーションがいつ始まるかを指定する
がありますん～

キーフレーム指定

次に↓この部分

@-webkit-keyframes 'loop' {
  0% {
    -webkit-transform: translate(0, 0);
  }

  100% {
    -webkit-transform: translate(-440px, 0);
  }
}

ここでは、キーフレームアニメーションを指定します
0%が初期値で、100%が最終値です
途中で動きを変えたければその地点の割合を%で指定してください
（真ん中であれば50%）

translateは位置で、x値,y値の順に指定します
その他は、
scale(左右,上下)：スケールを指定します、1が等倍
rotate(deg)：回転角を指定します（0～360）、0degで元の角度

まとめ？

これらを事細かく指定すると、cssだけで動かすことができます！
とは言ってもスムーズな動きやブラウザ依存などの問題もまだまだあるので、Flashには敵わないなーというのが感想
他のパラメータやFirefoxとかで再現したい場合は・・・ggrks!