CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った4個の利点

CSS, 備忘録

基本的なアニメーションの記述


サンプルはこちら.animation{
/*アニメーションする時間を設定。1sは1秒、500msは0.5秒*/
-webkit-animation-duration:10s;
/*アニメーションする回数を設定。未指定or1だと1回、2だと2回、infiniteは無限*/
-webkit-animation-iteration-count:infinite;
/*アニメーションの詳細の指定「@-webkit-keyframes ~~~」の~~~の部分が同じものを指す*/
-webkit-animation-name:animationName;
/*アニメーションの動き方
色々な種類があるが、あとで説明をします*/
-webkit-animation-timing-function:linear;
/*アニメーションの遅延時間
開始する時間を指定します。1sは1秒、500msは0.5秒遅延*/
-webkit-animation-delay:1s;
/*アニメーションの起点を決めます
回転させるときの中心点を定める時などに使用します*/
-webkit-transform-origin:50% 50%;
}
/*「-webkit-animation-name」で指定した物と同じ名前にします*/
@-webkit-keyframes animationName{
/*durationとdelayを含めて考えると1秒後のアニメーション*/
0%{
/*360度回転させます。その他の設定は後でします。*/
-webkit-transform:rotate(0deg);
}
/*durationとdelayを含めて考えると6秒後のアニメーション*/
50%{
/*普通のcssプロパティも指定できます。この場合は透明にします。*/
opacity:0;
-webkit-transform:rotate(360deg);
}
/*durationとdelayを含めて考えると11秒後のアニメーション*/
100%{
/*0度に戻します*/
-webkit-transform:rotate(0deg);
}
}

という感じです。
一気に書きすぎてちょっと伝わりにくいかもしれないですね…
最初にアニメーションの基本的な指定を記述して、その後に動きの詳細を%指定で細かに明記して動かしています。

細かい説明は以下にちょろちょろっと書いてみますね。

アニメーション関連プロパティの説明のまとめ

プロパティ 説明・詳細
-webkit-animation-delay:1s; アニメーションの遅延時間。「1s」だと1秒、「500ms」だと0.5秒
-webkit-animation-duration:1s; アニメーションする(delayを除いた)時間。「1s」だと1秒、「500ms」だと0.5秒
-webkit-animation-iteration-count:infinite; アニメーションさせる回数の指定。デフォルトは1回。「2」だと2回、「infinite」だと無限回
-webkit-animation-timing-function:linear; 「default」「ease-in」「ease-out」「ease-in-out」「inear」「cubic-bezier」の指定が可能。こちらのサンプルを見ていただけば動きがわかるかと思います。
-webkit-transform-origin:50% 50%; アニメーションの起点を指定します。中心点をこの指定で設定することが出来ます。
-webkit-animation-name:animationName; 動きの詳細を指定している名前を記載します。←の場合、「@-webkit-keyframes animationName」と連動します。

変形プロパティ(-webkit-transform)のまとめ

「-webkit-transform:hogehoge;」の様に、hogehogeの部分に以下で説明している値を入れます。
半角スペースを置いて複数指定することも可能です。
/* 180度回転させて、2倍の大きさにする */
-webkit-transform:rotate(180deg) scale(2);

~degというのは角度を表していると思ってください。
720degの場合、回転させたい場合は2回転するという意味になります。

プロパティ 説明・詳細 サンプル
rotate(~deg) 回転させます。360degで1回転
rotateX(~deg) 水平方向を基準にして回転させます。360degで1回転
rotateY(~deg) 垂直方向を基準にして回転させます。360degで1回転
scale(~)
scale(~,~)
拡大・縮小。scale(2)で2倍、scale(0.5)で1/2倍の大きさになります。scale(2,1)のようにカンマを使うと横2倍、縦1倍の大きさになります。
skew(deg) 傾きを指定できます。
translate(~px,~px) 移動させます。translate(100px,200px)で横100px、縦200pxの位置に移動します。

上記を「@-webkit-keyframes animationName{}」の中で%を指定しながら設定していくことでアニメーションさせる事が可能になります。

全体のまとめ

  1. 指定の仕方がデザイナーの方でもわかりやすい書き方になっている
  2. Javascriptで動かすよりも軽い
  3. まだWebkit系でしか実装が進められていないため、CSS3の中で一番今後の動きが読めない

と言ったところでしょうか。

  • HTMLは構造
  • CSSは見た目
  • Javascriptは振る舞い

というようなお話が色々なところでされていたと思います。
CSS3が出てくるまでは「動く物=振る舞い」と扱っていた場合が多かったと思います。

しかし、今後は回転や拡大などの「見た目」に関する部分はCSSが補うことになるのかもしれません。
まだまだ動向が見逃せないところですね。

今回は基本の書き方を紹介しただけになっているので、次回以降では発展させた形でアニメーションを紹介したいと思います。

参考にしたサイト

Pages: 1 2

2 Comments »

  1. 記事書きましたっ。iPhoneでも動くよ! CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った 4個の利点 | kzms2 – html,css,javascript http://bit.ly/8TbUtY

    トラックバック by ずま/Zuma — 2009/12/24 木曜日 @ 0:56:03

  2. 記事書きましたっ。iPhoneでも動くよ! CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った 4個の利点 | kzms2 – html,css,javascript http://bit.ly/8TbUtY

    トラックバック by kzms2 — 2009/12/24 木曜日 @ 0:56:03

コメントを入力

コメント欄

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に出演しました。