得意なサイト制作
お見積り依頼
GG KNOWLEDGE
GrowGroupスタッフからお役立ち情報を発信!

@keyframesでアニメーションをさせたい!

テクノロジープログラミング まっすー 公開: 2020.11.25 更新: 2020.11.24

初めまして、今年度入社しましたまっすーです!
初めてのブログの執筆に対して何を書こうか迷いましたが、今回は僕の好きなアニメーションについて書いていきます。
簡単にアニメーションが実装できるので、ぜひお読みください!

keyframesって?

keyframesとはCSSで要素を指定し、アニメーションに沿ったスタイルを決めていくものです。
webのアニメーションといったらJsとかじゃないの?と思う方のいらっしゃると思いますが、それは違います!
普段使っているホバーのwebのアニメーションの一部です

keyframesを書いてみる

keyframeの枠組み

これらのプロパティを使いこなせば、簡単に実装ができます!

では、一つづつ説明してきます。

animation-name:

要素にアニメーションを適用させる場合にアニメーション名を指定します。
名前をつける時は、何かしらルールがあるとわかりやすいですね!
例)box-move 

animation-duration

要素が指定したアニメーション1回分にかける時間の長さを指定するときに使用します。

3秒にしたい時は3sと書きます。初期値は0

例)3s

animation-timing-function

要素にアニメーションを適用させる場合にタイミング・進行を指定します。

アニメーションが継続しているときに速度を調整し滑らかにすることができます。

これはベジェ曲線で表されることが多いのですが、割愛します。(ごめんなさい…)

指定方はいくつかあり紹介します。

ease 開始と終了を滑らかにする(初期値)
linear

一定の速度

ease-in

ゆっくり開始

ease-out 

ゆっくり終了

ease-in-out

ゆっくり開始、ゆっくり終了

 

 

animation-delay

要素にアニメーションを適用させた後に次のアニメーションが始まるまでの時間を指定します。

時間の指定なので、animation-durationと同じように指定します。初期値は0

例)1s

animation-iteration-count

要素のアニメーションを繰り返す回数を指定します。

指定法が数値かinfiniteを指定できます。数値はその回数分繰り返し、infiniteは無限に繰り返しを行います。

多くは数値指定をしないと思うので、infiniteで大丈夫だと思います!

数値 回数分繰り返す
infinite 無限に繰り返す

animation-direction

要素のアニメーションを再生する方向を指定します。

指定法はnormalとalternateがあり、normalは一定方向に繰り返します。alternateは逆再生が可能になります。

normal 一定方向の再生
alternate 逆再生

 

@keyframes ~~~

最後にアニメーションの実際の挙動を設定する物です。

多くはtransformで動かしたり、opacityで消したり表示したり、長さ高さを変えたやり方があります。

サンプルにある0%と100%とは、0%が開始値100%が終了値を表し、その値のときの位置を指定できます。

%のほかに、from、toがありますが意味合いは同じです。

また途中でも変化が欲しい時は50%などの数値もいれることが可能なのです。

プロパティをまとめてみる

いくつか上げてきたプロパティですが、何行も書くのって正直めんどくさいですよね!

実はこれ、まとめることができるんです!

animation: name 3s ease 1s infinite normal;

とまとめることができます!これで複数行書かずに済みますね笑

実際に使えるkeyframesを紹介

スクロールのアニメーション。

ちょっとしたローディングアニメーション

まとめ

いかがでしたでしょうか?
静的なページだと味気ない…アニメーションを取り入れたいけど、jsがわかんない。
そういった方に今回紹介したkeyframesを取り入れてください!

jsを実装をしなくても簡単なものならすぐできてしまうので、お手軽です!
keyframesは大きな要素の動きより小さな動きの方が多いので、サイトのアクセントとして実装し
見せたい箇所をちゃんと見せ、遊びも取り入れられるので、ぜひご活用ください!

どなたかの参考になれば、嬉しいです!

この記事が気に入ったら
「いいね!」

この記事を書いた人


関連コンテンツ

GrowGroupなら、
解決できます。

より多くの企業様のお力になりたい。
まずはお気軽にお問い合わせください。

052-753-6413 受付 / 平日10:00〜19:00 お見積り依頼 資料請求