JavaScript不要!CSSだけでアニメーションを作る方法

こんにちは!ライターのナナミです。

最近WEBサイトでちょっとしたアニメーションをつけることが多くなっていますね。

anime-ex1

こんな風にボタンの幅が変わったりすると、ユーザーに使いやすい上に、ちょっとおしゃれですね。

でもこういうのって難しいんでしょう…?
jQueryとか使うんでしょう…?

と思っているそこのあなた。これ、CSSだけで作れちゃいます。ということで今回はCSSだけで作るアニメーションについて紹介していきます。

この記事の流れは下記の通りです。

  • 【基礎】CSSアニメーションを作る方法
  • 【基礎】CSSアニメーションの作り方
  • 【発展】コピペでOKな使用例
  • 【おまけ】もっと複雑なアニメーションを作ろう


これを読めば、ボタンにアニメーションをつけるなんて楽勝になりますよ!

CSSでアニメーションを作る方法は2つ

CSSのみでアニメーションを作る方法は、transitionanimationの2つがあります。どちらもメリットデメリットがあるので、細かく見ていきましょう。

簡単実装:transition

transitionは要素の変化にかかる時間を指定できるプロパティです。

anime1

普通、マウスオーバーした時などはパッと一瞬で変わりますよね。それはこのtransitionが0秒になっているからです。

これを1秒や2秒に変更すると、その間の変化も描写されます。その結果、アニメーションとして動きが見えるようになるわけです。

メリット

とにかく実装が楽です。変化させたい要素に指定するだけで、すぐに使えちゃいます。マウスオーバーした時にボタンをちょっと大きくする、とか、ちょこっとした変化をつけたい時に超便利です。

デメリット

シンプルな実装なので、細かい動きなどは指定することができません。また、アニメーションをループさせることができません。

変化するか元に戻るかというアニメーションであれば向いているのですが、繰り返し動作させたい時には不向きです。

細かく設定:animation

animationは名前の通り、アニメーションの設定ができるプロパティです。transitionよりも詳細な設定をすることができます。

anime2

animationの指定時は、keyflameというものを併せて使用します。keyflameでは、アニメーションの進行状況でどのような変化をするのかを指定します。例えば、全体で4秒のアニメーションの2秒の時点では青くして、4秒になったら赤くする、という指定ができるのです。

anime3

メリット

詳細な設定ができるので、複雑なアニメーションを作ることが可能です。また、ループの指定もできるので、連続したアニメーションも作ることができます。

デメリット

ちょっと実装が複雑で、transitionほどの手軽さはありません。

自由度が高すぎて、どう使えばいいのかを考えるのが難しい…という感じです。覚えれば本当にいろんなアニメーションが作れる、素敵なプロパティです。

transitionでアニメーションを作る

transitionでの実装方法は超簡単。変化させたい要素にtransitionを指定し、変化後の見栄えを擬似要素:hoverなどに指定するだけです。

CSS

時間の部分はs(秒)やms(ミリ秒)で指定することができます。

では、要素にマウスオーバーしたら変化するという動きをつけてみましょう。

anime1

HTML

CSS

いい感じにふわっと変化しましたね!

animationでアニメーションを作る

animationの場合は、transitionよりもフローが多くなります。流れとしては、keyflameで動きの内容を決めて、animationで動作させるという感じです。

ちょっと細かく見ていきましょう。

keyflameで動きを決める

まず、どんな動きにするのかをkeyflameで指定します。

CSS

動きの名前は、このkeyflame自体の名前になります。このあとanimationで動作をさせる時に使うものです。特に決まりはないので、好きな名前をつけましょう。

進行度は、そのアニメーションがどれだけ進んでいるかです。0%でまだ始まっていない状態、100%で完了した状態になります。

進行度のカッコの中には、その時点でどのような見栄えになっているのかを指定します。50%だったら、「半分の時点ではこの色にする」という指定ができるわけです。

進行度の部分は複数指定することができます。10%、20%と刻んでいけば、かなり細かい設定ができますね。

今回は、横に移動しつつ色が変化するアニメーションにしてみましょう。

anime0

HTML

CSS

positionで位置をずらしつつ、色が変わるようにしました。

ただし、この時点ではアニメーションしません。

animationで動作させる

keyflameを指定しただけでは、アニメーションは動作しません。動作のためにanimationを指定していきます。

CSS

keyflameの名前は先ほどつけたものです。
今回は「anime」という名前ですね。

変化する時間はtransitionと同じく、s(秒)やms(ミリ秒)で指定することができます。

さらに、ループの回数や動きの方向など、かなり細かく設定することができます。今回説明すると超長くなってしまうので、どんな指定ができるのかはリファレンスを参照してみてください。
http://www.htmq.com/css3/animation.shtml

では、先ほどのkeyflameを2秒かけて動作するようにしてみましょう。

anime5

HTML

CSS

いい感じに横に動きましたね!

コピペでOK! 汎用使用例

アニメーションの使い方はわかったけど、どう動かせばいいのかわからない…
どう指定すればいい感じの動きになるのかよくわからない…

そんな方のために、よく使いそうな例をいくつか用意してみました。コピペして使ったり、参考にしたり、色々活用してください!

ボタンに動きをつける

anime-ex1

HTML

CSS

単純にopacityで色を薄くするのもいいのですが、こうしてちょっと横に広がる動きも面白いですね。

えっ、CSSで色って薄くできるの?

と思ったあなたは、ぜひ下記の記事も読んでみてください。

CSSのopacityで要素をちょっと透明にする方法と活用法まとめ
更新日 : 2018年11月27日

ふわっと下から出てくる

opacity-ex2

HTML

CSS

ロゴがこうして出てくるとちょっとおしゃれですね!

くるくるローディングっぽく

anime-ex3

HTML

CSS

ずーっとくるくる回ります。グラデーションと組み合わせると、色がくるくる変わっているように見えていい感じになりますね!

これやってみたいけどグラデーションの指定がよくわからない…

という方は、下記のグラデーション解説をご覧ください。

もう悩まない!CSSグラデーション活用法とサンプルまとめ
更新日 : 2018年11月27日

おまけ こんな動きも作れちゃう!

アニメーションがわかってくると、こんな風にグラデーションを動かせたりできます。

anime-ex4

CSSだけでここまでできるところに、さらにJava ScriptやjQueryも組み合わせれば、動きの可能性は無限大です。

下記のようなサンプル記事も活用して、ぜひ色々試してみてください。

https://lab.sonicmoov.com/markup/css/css-animation-20/

CSSだけでは高条件の案件獲得が難しい

WEBサイトの見栄えを決めるCSSですが、それ単体だけを習得するよりも、一緒にPhotoshopやJavaScriptを学ぶと更にできる事が広がり、あなたの市場価値としても希少性が高まりやすくなります。

CSSだけの案件は価格帯が低い

もしあなたがCSSスキルを身につけた先に案件獲得などを考えている場合、より一層上記で説明したスキルをセットで習得することをおすすめします。

というのも、もちろんCSSを学ぶことで出来ることは広がりますが、仕事獲得という面で考えるとCSS単体だとなかなか厳しい面があるからです。なぜなら案件自体は多いのですが、3〜5万ほどの低単価帯が多いのです。

しかし先ほどお伝えしたPhotoshop、JavaScriptあたりも扱えるとなると、仕事獲得のしやすさ、単価もグッと上がります。だからこそ今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。

もちろん、一緒に学ぶオススメ言語はPhotoshop、JavaScript以外にもたくさんあり、どの言語を学ぶといいか?はあなたの作りたい物によって変わります。

詳しく知りたい人は、是非プログラミング言語診断を利用してみてください。あなたにぴったりの言語を1分ほどで無料診断致します。

挫折せずにスキルを身につけたいなら

セットでスキルを身に付けることをオススメしましたが、

CSSだけでも大変なのに他の言語なんて..

と思ってしまう方もいることでしょう。確かに、CSSも極めようと思ったら非常に奥が深いので、まずそれを習得するだけでも大変です。そこに加えて他の言語を身に付けると考えると、かなり難しそうですよね。

そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?弊社では、

  • 現役エンジニアによるマンツーマンレッスン
  • 目的に合わせたあなた専用のオーダーメイドカリキュラム
  • 転職支援、フリーランスとしての独立支援

を徹底しているので、つまずく事なく学習を進める事ができます。もちろん、いきなり入会する必要はありません。まずは無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。

下記ボタンより1分ほどで予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。

無料体験レッスンの
予約はこちら

まとめ

いかがでしたか?

あれ?意外と簡単じゃない?と思った方も多いのではないでしょうか。そう、アニメーションは決して難しいものではないんです。

もう軽率に使っちゃいましょう、バンバン使っちゃいましょう。そしてかっこいい動きが作れたら、周りに自慢しちゃいましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説