デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

CSS3 アニメーション機能を使ってみた animation

アニメーション(animation)
前回記事では、transitionプロパティを使って、アニメーション機能を実現しました。
今回は、animationプロパティを使ってみたいとおもます。

スポンサーリンク

animationプロパティ

animationは、どの段階でどの値がどう変化するのかを記したキーフレームという特別な書式を使用します。

transitionは、二点間の移動を表現していましたが、
animationは、キーフレームで変化のパターンを沢山作れるみたいです。

早速動かしてみました。(以下)
ボックスにマウスをおくと、拡大しながら下へ移動し、再び元の位置に戻ってきます。

テスト

追加ソースコードは以下です。

@keyframs書式

上記ソースコードの
@keyframesと記載されている箇所がキーフレームの設定になります。
決めれれた時間内の中で度のタイミングでどの値がどう変化するのかを記載します。
また、@keyframesの後には、キーフレームの名前を指定し、ここでつけた名前を
animation-nameプロパティに指定することでアニメーションが実行されます。

今回は、時間が50%進んだ時に、translateで縦方向に300px移動させ、
scaleを2.0にすることで、拡大させています。
そして、100%進んだ時に、縦方向の位置ととscaleを最初の値に戻すことで、元の位置へ戻しています。

animationプロパティ

animation-name
キーフレームを名前で指定して実行させるためのプロパティです。
今回は、test_boxという名前で設定しています。

animation-duration
アニメーションの再生時間を設定
今回は、10sを設定しています。

今回指定したもの以外にも以下のものがあります。
animation-timing-function
再生速度の変化パターンを設定

ease 加速をつけて、ゆっくり始まり、ゆっくり終わる
ease-in ゆっくり始まり、一定速度で終わる
ease-out 一定速度で始まり、ゆっくり終わる
ease-in-out ゆっくり始まり、ゆっくりと終わる
ease-in-out ゆっくり始まり、ゆっくりと終わる
linear 最初から最後まで一定の速度で変化

animation-delay
アニメーション再生開始を遅らせる

animation-iteration-count
何回繰り返し再生するかを設定

animation-direction
逆再生させるかどうか、繰り返し再生中にどのタイミグで逆再生させるかを設定

nomal 常にキーフレーム通りに再生
reverse 常に逆再生
alternate 繰り返しの際、キーフレーム通りの再生と逆再生を繰り返す
alternate-reverse 繰り返しの際、逆再生とキーフレーム通りの再生を繰り返す

animation-play-state
再生を一時停止

running アニメーションを再生可能な状態にする
paused 一時停止状態にする

animation-fill-mode
animation-delayでの再生が遅延されている間の表示、
また、再生終了時の表示設定

forwards 再生後は100%表示のままにする
backwards 再生遅延中は、0%表示にする
both 再生遅延中は、0%表示、再生後は100%表示にする
none @keyframes{}内の指定とは無関係に表示

最後に

以上、CSS3のanimationプロパティでアニメーション機能を使ってみました。
キーフレームを細かく設定すれば、transitionよりも複雑な動きが実現できそうです。
ただし、対応していないブラウザなどもあるようなので
その辺りも考えて使ったほうがよさそうです。

参考になれば幸いです。

参考書籍↓

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン