CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った4個の利点
基本的なアニメーションの記述
サンプルはこちら.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{}」の中で%を指定しながら設定していくことでアニメーションさせる事が可能になります。
全体のまとめ
- 指定の仕方がデザイナーの方でもわかりやすい書き方になっている
- Javascriptで動かすよりも軽い
- まだWebkit系でしか実装が進められていないため、CSS3の中で一番今後の動きが読めない
と言ったところでしょうか。
- HTMLは構造
- CSSは見た目
- Javascriptは振る舞い
というようなお話が色々なところでされていたと思います。
CSS3が出てくるまでは「動く物＝振る舞い」と扱っていた場合が多かったと思います。
しかし、今後は回転や拡大などの「見た目」に関する部分はCSSが補うことになるのかもしれません。
まだまだ動向が見逃せないところですね。
今回は基本の書き方を紹介しただけになっているので、次回以降では発展させた形でアニメーションを紹介したいと思います。
参考にしたサイト
Pages: 1 2
