ホームページ

  • Twitter
  • Facebook
  • HATENA
  • POCKET

animationを覚えよう!第一回:基本中の基本を覚える

目次

  1. animationとは
  2. animationを使っているサイト
  3. おっとっと(森永製菓)
  4. ハーモニーランド
  5. プロパティ一覧
  6. まとめ
好きな四字熟語は一期一会です。とらりんです。
さてさて、今回はcssのanimationについて。
実はわたくし、animationの知識がほとんどなく、使えておりません。
勉強しないと・・・と思い続けて早幾年。
このまま出来ませんと言い続けるのは恥ずかしいし悔しい。
ここらで一念発起、勉強しつつ、得た知識をまとめていこうと思います。
一からコツコツ、少しずつ。今回はシリーズ一回目です。

animationとは

animationは要素に動き(アニメーション)を付けるcssのプロパティ。
MDNのサイトが分かりやすいかと思います。
一昔前はjsで設定していたような事がcssでできるように。
(jsが超苦手な私は元々やってなかったのですが。。。)
使いこなせれば表現の幅が無限に広がりますね。
animationを調べていてtransitionと似ているなと思ったのですが、
transitionは動きがシンプルでアクションきっかけで使いやすい。
animationは動きが複雑にできて自動的である。
と、ざっくりですが違いがあるような気がしました。
この違いについてはまた改めて取り上げたいと思っております。

animationを使っているサイト

私が見つけたanimationを使っているサイトをご紹介。

おっとっと(森永製菓)

https://www.morinaga.co.jp/ototo/

1)海藻がふわふわ揺れている
2)魚が泳いでる
3)泡が下から上へ登っている
紹介した箇所以外にもいくつか使われていて、全体的にふわふわ感があって水中の感じがよく出てますね。
しかしとっても懐かしい。小学生の時よく食べたなー。

ハーモニーランド

http://www.harmonyland.jp/

キティちゃんが歩いている

お散歩中なんですかねえ。
他にanimationかな?と思ったらアニメーションgifだった。もありますね。

プロパティ一覧

書いて覚えるという事で、animation関連のプロパティ一覧を表にしました。

animation-name要素に適用される1つまたは複数のアニメーションを設定
初期値:none
animation-duration1回のアニメーション周期が完了するまでの所要時間
初期値:0s
animation-timing-functionアニメーションがそれぞれの周期の中でどのように進行するか
初期値:ease
animation-delayアニメーションをいつ開始するか
初期値:0s
animation-iteration-count停止するまでにアニメーション周期が再生される回数
初期値:1
animation-directionアニメーション再生の向きを順方向、逆方向、前後反転のいずれにするか
初期値:normal
animation-fill-modeCSS アニメーションの実行の前後にどう対象にスタイルを適用するか
初期値:none
animation-play-stateアニメーションが実行中か停止中か
初期値:running

まとめ

いかがでしたか。
animationというのがあるよーというだけのシンプルすぎる内容でしたが、今回を踏まえてこれからどんどん実際の活用例をご紹介していきたいと鼻息荒く思っております。
どうぞお楽しみにお待ちください!
  • Twitter
  • Facebook
  • HATENA
  • POCKET
  •