Help us understand the problem. What is going on with this article?

【CSS3】@keyframesとanimationでアニメーション実装

概要

animationプロパティと@keyframesを使って、CSSだけでアニメーションを作っていきます。Reactをフレームワークとして開発している人も実装できます。(当然)←後で、JSXの構文にCSSを動的に当てるおすすめのやり方を紹介します。

どんなアニメーションができるの?

主に↓の三つです。
・色の変化
・形状の変化
・位置の移動

@keyframes

@keyframes はCSSの文法で、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できます。@規則のため、@から始めます。

sampleの所には任意の名前
0%の{}内にはcssプロパティ: 値;
100%の{}内にはcssプロパティ: 値;
が入ります。
2f4418c6-559f-dae6-8d09-4ddfb70239b7.png

また、別の書き方として、from=0%、to=100%といった書き方もできます。

92ccc35c-58fc-2a91-8596-d38dd10e4dc9.png

御覧の通り、区切りを好きなだけ入れることができます。上の場合、0~49%間で徐々に半透明になり、50%~75%間で徐々に透明になり、76%~100%間で徐々に不透明となります。
%の間隔が何を示しているのか、後で説明します。

【重要】animation 関連のプロパティ

ここでanimationプロパティが登場します。
まず、animation-nameでどのアニメーションを使用するか指定します。(ここでは、先ほど作ったsampleを使用します。)

0ccdcaba-d851-996a-35b5-0eaa891b9d5e.png

次に他のanimationプロパティも指定してあげます。
animation-duration: 10s: //アニメーションの時間を指定しています。
animation-timing-function: ease: //動き緩急を指定しています。
animation-delay: 3s;//アニメーションをいつ始めるか指定しています。( 初回のみ
animation-iteration-count: infinite://アニメーションの回数を指定しています。
(指定しなかった場合、animationプロパティの初期値となります)
初期値⇒http://www.htmq.com/css3/animation.shtml

今回は、animation-durationを10秒と指定しているので、sampleタグのアニメーションは透明から5秒かけて半透明になり、半透明から2.5秒かけて透明になり、透明から2.5秒かけて不透明になります。
(0~49%間=5秒、51%~75%=2.5秒、76%~100%=2.5秒ということ)

区切りをもっと細かくつければ、0.1秒で透明から不透明になるなど、より緩急をつけることもできそうですね!

animation プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数、アニメーションの緩急などを指定することができます。

↓先ほど作ったアニメーション

See the Pen MNKmOo by 浅原昌大 (@Rt_citron) on CodePen.

アニメーションの緩急(animation-timing-function)

このプロパティで動き方を指定してあげることができます。
必要に応じて変えましょう。
ease(開始と完了を滑らかにする)
linear(一定)
ease-in(ゆっくり始まる)
ease-out(ゆっくり終わる)
ease-in-out(ゆっくり始まってゆっくり終わる)

!7c49e837-1a34-1eb2-0bc3-f3a06abec6ef.gif

また、この緩急はcubic-bezierを使って自作することもできます!

JSXの構文にCSSを動的に当てる

今回、@keyframesとanimationとは関係ない部分ですが、とりあげます。

ボタンを押した時、何かアクションが起きた時、動作するアニメーションを作りたい時に僕は詰まりました。

常に表示したいアニメーションは、アニメーションがついたclassを普通にrenderしていれば、アニメーションをしてくれます。(これは当然)

しかし、アクションが起きた時などにアニメーションをするなどの動作は、アクション後にアニメーションが指定されたclassをrenderしなければいけません。(これもよく考えたら当然)

要するに、アニメーションはアニメーション設定されたclassが現れた時に開始されるので、アクション後のアニメーションなどのclassは常にrenderしてはいけないということ。

今思えば全て当たり前なことですが、初めてanimationプロパティを使用した時、僕は悩みました^^;

JSXの構文でcssのstyleを当てる場合、以下のようにコンポーネント内にclassName="sample"と書きますよね。(sampleクラスにはボタンを押したときにしたいアニメーションが入っています)

24dd0eb0-319c-1cec-4eed-a019fb4102eb.png

しかし、この場合だと常にsampleクラスがrenderされているので、 アニメーションが効きません。

このように変更します。

三項演算子とフラグを用いて、このようにボタンを押したとき、クラスが変化するように書いてあげることで変わった瞬間にアニメーションが効くようになります。
f355181f-4002-8493-ce63-5e5e08410c09.png

(もう少し、簡単にclassを変更できる方法があるかも?)

他にもReactで動的なclassNameを指定する方法として classNames というのもあります。

*sample用に作ったのでソースコードにミスがあるかもしれません。

補足

animationプロパティですが、

animation-name: sample:
animation-duration: 10s:
animation-timing-function: ease:
animation-delay: 3s;
animation-iteration-count: infinite:

これを一文で

animation: sample 10s ease 3s infinite;

と書くことがもできます!

こちらの方がすっきりしていいですよね。

しかし、

自分が作ったアニメーションの動作確認をした時、このように一文でまとめた書き方では、Edgeはアニメーションが起きませんでした。
(chrome,firefoxでは大丈夫でした)

Edgeのバージョンによると思いますが、対応されていないこともありますので、
無難に上の方の書き方の方がいいのかもしれませんね。

まとめ

keyframesをとanimationプロパティだけでほとんどのアニメーションが実装できる予感がします。ちなみに、紹介していないanimationプロパティがまだたくさんあります。多すぎます。
さらに、SCSSを使うと、さらに凝ったアニメーションができるらしいです!
アニメーションは奥が深い。

参考、引用サイト

https://qiita.com/7968/items/1d999354e00db53bcbd8

citron1605
地方国立大学生。弓道部の支援webアプリHiRateを開発。運用年数1年。主に使う言語やライブラリ→JS/React/Redux/gatsby/GoogleAppScript/Node.js 研究テーマ 生体情報
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away