スライドショースライドショー

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

セレクタ{
    transition:変化にかかる時間;
}

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

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

anime1

HTML

<div class="anime_test">
</div>

CSS

.anime_test:hover {
    background-color: #2196F3;      /* 背景色指定 */
}
.anime_test {
    height: 200px;                  /* 高さ指定 */
    width: 200px;                   /* 幅指定 */
    background-color: #F44336;      /* 背景色指定 */
    transition: 1s;                 /* アニメーション指定 */
}

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

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

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

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

keyflameで動きを決める

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

CSS

@keyflame 動きの名前{
    進行度(%){
        その時点での見栄え
    }
}

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

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

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

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

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

anime0

HTML

<div class="anime_test">
</div>

CSS

.anime_test {
    height:  200px;                 /* 高さ指定 */
    width:  200px;                  /* 幅指定 */
    background-color: #2196F3;      /* 背景色指定 */
    position: relative;             /* 位置指定 */
}

@keyframes anime {
    0% {
        background-color: #f00;     /* 背景色指定 */
        left: 0;
    }
    50% {
        background-color: #4caf50;  /* 背景色指定 */
        left: 200px;
    }
    100% {
        background-color: #2196F3;  /* 背景色指定 */
        left: 400px;
    }
}

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

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

animationで動作させる

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

CSS

セレクタ {
    animation: keyflameの名前 変化する時間 ループ回数などの細かい指定;
}

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

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

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

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

anime5

HTML

<div class="anime_test">
</div>

CSS

.anime_test {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    background-color: #2196F3;  /* 背景色指定 */
    position: relative;         /* 位置指定 */
    animation: anime 2s 0s infinite alternate;  /* アニメーション指定 */
}

@keyframes anime {
    0% {
        background-color: #f00;         /* 背景色指定 */
        left: 0;
    }
    50% {
        background-color: #4caf50;      /* 背景色指定 */
        left: 200px;
    }
    100% {
        background-color: #2196F3;      /* 背景色指定 */
        left: 400px;
    }
}

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

コピペでOK! 汎用使用例

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

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

ボタンに動きをつける

anime-ex1

HTML

<a class="anime_test" href="URL">
    click!
</a>

CSS

.anime_test {
    width: 300px;                   /* 幅指定 */
    text-align:  center;            /* 文字中央揃え */
    display: block;                 /* ブロック要素にする */
    padding:  15px;                 /* 余白指定 */
    font-size:  20px;               /* 文字サイズ指定 */
    text-decoration: none;          /* デフォルトCSS打ち消し */
    color:  #fff;                   /* 文字色指定 */
    background-color: #00BCD4;      /* 背景色指定 */
    border-radius:  5px;            /* 角丸指定 */
    transition: 0.5s;               /* アニメーション指定 */
    margin:  0 auto;                /* 要素中央揃え */
}
.anime_test:hover {
    opacity:  0.7;                  /* 透明度指定 */
    width: 340px;                   /* 幅指定 */
}

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

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

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

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

ふわっと下から出てくる

opacity-ex2

HTML

<img class="anime_test" src="test-img.png">

CSS

.anime_test {
    display:  block;                /* ブロック要素にする */
    margin: 0 auto;                 /* 要素中央揃え */
    position:  relative;            /* 位置指定 */
    animation: anime1 1s ease;      /* アニメーション指定 */
}

@keyframes anime1 {
    0% {
        opacity:  0;                /* 透明度指定 */
        top: 50px;                  /* 位置指定 */
    }
    100% {
        opacity:  1;                /* 透明度指定 */
        top: 0;                     /* 位置指定 */
    }
}

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

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

anime-ex3

HTML

<div class="anime_test">
</div>

CSS

.anime_test {
    height:  200px;                         /* 高さ指定 */
    width:  200px;                          /* 幅指定 */
    border-radius:  50%;                    /* 角丸指定 */
    background: linear-gradient(-90deg, #FF00A1, #F6FF00);  /* グラデーション指定 */
    animation: anime 2s linear infinite;    /* アニメーション指定 */
    position: relative;                     /* 位置指定 */
}

@keyframes anime {
    0% {
        transform: rotate(0deg);    /* 角度指定 */
    }
    100% {
        transform: rotate(360deg);  /* 角度指定 */
    }
}

.anime_test:before {
    content: "";      /* 空の要素を作る */
    height:  180px;             /* 高さ指定 */
    width:  180px;              /* 幅指定 */
    display:  block;            /* ブロック要素にする */
    background-color:  #fff;    /* 背景色指定 */
    border-radius: 50%;         /* 角丸指定 */
    margin: 0px auto;           /* 中央揃え */
    position:  relative;        /* 位置指定 */
    top: 10px;                  /* 位置指定 */
}

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

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

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

もう悩まない!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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

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

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