[CSS3,animation]CSS3のanimationで何ができるか試してみた!使わないと思うけどw

[CSS3,animation]CSS3のanimationで出来ることをまとめてみた使わないけどw
やっぱり動きがあると面白いですよね!動かさないけど。
どうも久々更新の下山です。って書くと複数人で更新してるみたでかっこいい。

さて、とうとうアニメーションに手を出し始めました。
今回はCSS3で登場のanimationプロパティってどんなことが出来るの?ってことでまとめてみるよ!

animationプロパティ

animation-name アニメーションに名前を付けます。
animation-duration アニメーション実行1回にかける時間
animation-timing-function アニメーション実行中の速度変更
animation-iteration-count アニメーションを繰り返す数
animation-direction 繰り返す際の指定
animation-play-state 実行、停止の指定
animation-delay 実行や変更の待ち時間
animation-fill-mode アニメーション実行後の指定、変化したままか否か

animationショートハンドも使用可能です。

あと1つ重要なのが「@keyframes」です。
animetaion-nameで指定して通過点をそれぞれ指定します。

グダグダ説明しても仕方ないのでやってみましょう。

上記のようなリンクがあります。
これをCSSでボタン風にしていきます。

ボタンみたいになりましたね。
これを「:hover」を使って動きを付けます。

色を赤にして幅を250pxにしてねーです。

See the Pen ZGegrj by mitsuki sagayama (@sagayama) on CodePen.

しかしこれだけじゃアニメーションはしませんよね。 ここでanimationプロパティの登場。

  • 名前は「btn」
  • アニメーション1回にかける時間は2秒
  • 速度変更はease-out
  • 繰り返す回数は無限
  • 繰り返し方は行ったり来たり
  • 待ち時間0秒

長くなりましたけど、こうなります。
ショートハンドで書きたい場合は「animation:btn 2s ease-out 1 0s;」となります。

実はこれでもアニメーションは実現しません。
@keyframesで「a」の状態から「a:hover」の状態へどう通過していくか指定します。

btnって名前のヤツを0%のときは背景グレー、幅150pxで100%のときは背景赤で幅250pxにしろや。って感じです。

See the Pen MwpNMz by mitsuki sagayama (@sagayama) on CodePen.

まとめ

面白いですね!こんなボタン誰が使うんでしょうね!
でも面白いから色々やっては書いてみたいと思います。

今回はじめてCODEPEN使ってみたんですけど・・・。ねっ!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク