【やぁみんな】CSS3のanimationを使ってみる【久しぶり!】

どうも、1年半ぶりに当たったpearmasterです
確変に入ってしまったかとガクブルしております・笑

他愛のない話をしようかと思いましたが手元に写真が無かったのでこれでお茶を濁してみます

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

以前、社内で出されていた宿題
最初僕は関わっていなかったのですが、それの発表を聞いている内に作成してみたくなったので簡易的なものですが作ってみました
(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-name

animation-nameは、要素にキーフレームアニメーションを適用する場合のアニメーション名を指定します
Flashのタイムラインみたいなもんです
詳細は後ほど

animation-duration

animation-durationは、どれくらいの時間でアニメーションを完結させるかの時間、単位はs(秒)

animation-timing-function

animation-timing-functionは、イージングを指定します
今回指定しているlinerは、一定の割合で動きます
これ以外だと、
ease-in:最初ゆっくり
ease-out:最後ゆっくり
cubic-bezier(数値, 数値, 数値, 数値):3次ベジェ曲線を (x1, y1, x2, y2) で指定
など

animation-iteration-count

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!