css3のみで1行アニメーション

サンプルデモ

css3のみアニメーション概要など

上の動画の様な1行で、縦にロールしながら表示する手法をcss3で表現したサンプルを書きたいと思います。

いつもの様に、Webkit系(Chrome、Safari)のブラウザでご覧下さい。

詳細は続きから

実働デモ(CSS3アニメーション対応ブラウザのみ)

  • 表示させたい内容その1
  • その2!
  • 何らかの内容その3
  • 内容その4

ソース

HTML

1
2
3
4
5
6
7
8
<div id="kzms2scroll">
	<ul>
		<li>表示させたい内容その1</li>
		<li>その2!</li>
		<li>何らかの内容その3</li>
		<li>内容その4</li>
	</ul>
</div><!-- /#kzms2scroll -->
CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* リセット(自ページにあわせて調整して下さい) */
#kzms2scroll,
#kzms2scroll *{
	margin:0!important;
	padding:0!important;
	line-height:1!important;
}
/* リストを1行に見せるための調整 */
#kzms2scroll{
	overflow:hidden;
	eight:1em;
}
#kzms2scroll ul{
	/* アニメーション全体で10秒となるように */
	-webkit-animation-duration:10s;
	/* アニメーションを無限ループさせるように */
	-webkit-animation-iteration-count:infinite;
	/* アニメーション名を指定 */
	webkit-animation-name:kzms2scroll;
}
@-webkit-keyframes kzms2scroll{
	/* 1st line */
	0%{/* リストの位置を調整する */
		opacity:0;
		margin-top:0;
	}
	6.25%{/* 表示する */
		opacity:1;
		margin-top:0;
	}
	18.75%{/* しばらく表示する */
		opacity:1;
		margin-top:0;
	}
	24.99%{/* 非表示にする */
		opacity:0;
		margin-top:0;
	}
	/* 2nd line */
	25%{/* リストの位置を調整する */
		pacity:0;
		rgin-top:-1em;
	}
	31.25%{/* 表示する */
		pacity:1;
		argin-top:-1em;
	}
	43.75%{/* しばらく表示する */
		pacity:1;
		argin-top:-1em;
	}
	49.99%{/* 非表示にする */
		pacity:0;
		argin-top:-1em;
	}
	/* 3rd line */
	50%{/* リストの位置を調整する */
		pacity:0;
		argin-top:-2em;
	}
	56.25%{/* 表示する */
		pacity:1;
		argin-top:-2em;
	}
	68.75%{/* しばらく表示する */
		pacity:1;
		argin-top:-2em;
	}
	74.99%{/* 非表示にする */
		pacity:0;
		argin-top:-2em;
	}
	/* 4th line */
	75%{/* リストの位置を調整する */
		pacity:0;
		argin-top:-3em;
	}
	81.25%{/* 表示する */
		pacity:1;
		argin-top:-3em;
	}
	93.75%{/* しばらく表示する */
		pacity:1;
		argin-top:-3em;
	}
	100%{/* 非表示にする */
		pacity:0;
		argin-top:-3em;
	}
}

かなり強引に%と時間を設定していますが、上記のようなソースでJavascriptを使わずに現在あるアニメーションを実装することができます。

%の配分の考え方

  1. まず全体として何秒で終わらせたいのかを考える(今回の場合は10秒)
  2. アニメーションの大枠で区切る(今回は4動作なので25%ずつ)
  3. その中で何動作あるか考えて、さらに区切る(今回は基本1フレームを6.25%と考えて配分)
  4. あとは動かしてみて、%の配分や「-webkit-animation-duration」の設定を変更する

上記の考え方を行うことで、アニメーションさせるにはどう考えればよいかがわかるかと思います。

まとめのようなもの

  • アニメーションを秒単位で考えにくい
    →全体の秒数は決められるが、個別のアニメーションの時間を考えにくい(%で考える必要があるため)
  • script慣れしていない人でも、比較的さわりやすい
    →上のような欠点があるものの、%で割り振るだけでいいため、scriptに慣れていない人はもしかしたらこちらの方が判りやすいのかもしれません
  • Javascriptオフでも挙動、動作も軽い。
    →当たり前ですがJavascriptオフでも動きます。iPhoneでも動きますもちろん。

何秒後に動かす!などの考え方とは少し概念が異なるため、扱いにくい部分があるかと思いますが体感的にはわかりやすい表記にはなっているかと思います。

ですが、厳密にアニメーションさせたい場合は、やはり現在だとJavascriptを使わないと難しいのではないかなという印象を受けました。

今度はJavascriptと比較、もしくは絡めて説明出来たらなと考えています。

1件のコメント »

  1. 記事書きました。小ネタですが。 css3のみで1行アニメーション | kzms2 – html,css,javascript http://bit.ly/9ixVlY #css #css3

    トラックバック by ずま/Zuma — 2010/2/1 月曜日 @ 0:56:54

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。