[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で指定して通過点をそれぞれ指定します。

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

<a href="#">btn</a>

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

a {
  display:block;
  color:#fff;
  width:150px;
  padding:1em;
  text-align:center;
  background:#666;
  text-decoration:none;
}

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

a:hover {
  background:#c00;
  width:250px;
}

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

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

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

  • 名前は「btn」
  • アニメーション1回にかける時間は2秒
  • 速度変更はease-out
  • 繰り返す回数は無限
  • 繰り返し方は行ったり来たり
  • 待ち時間0秒
a {
  display:block;
  color:#fff;
  width:150px;
  padding:1em;
  text-align:center;
  background:#666;
  text-decoration:none;
}
a:hover {
  background:#c00;
  width:250px;
  animation-name:btn;
  animation-duration:2s;
  animation-timing-function:ease-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-delay:0s;
}

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

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

@keyframes btn {
  0% {background:#666; width:150px;}
  100% {background:#c00; width:250px;}
}

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

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

まとめ

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

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

タイトルとURLをコピーしました