makurazaki.org
[CSS3,animation]CSS3のanimationで何ができるか試してみた!使わないと思うけどw | Maku_zin Ver2.1.1
やっぱり動きがあると面白いですよね!動かさないけど。 どうも久々更新の下山です。って書くと複数人で更新してるみたでかっこいい。 さて、とうとうアニメーションに手を出し始めました。 今回は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」の状態へどう通過していくか指定します。