CSSで手軽にアニメーション表現をする方法
CSS3が主流となり、オブジェクトに簡単な動きをつけるくらいなら
CSSだけでも実装することが可能となりました。
今回は、サイトを作成したときに何か物足りないと感じたときに実装できる、
手軽なCSSでのアニメーション表現を紹介します！
それでは、手始めにCSSだけでできる、簡単なものからいきましょう！
1、オンマウスでオブジェクトの色を変えたい
オンマウスで色を変えるには、ある要素に:hoverを指定して、
そのなかで変更したい色を指定すればいいですね。
【HTML】
|
1 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 |
.object01{ width: 100px; height: 100px; background-color: red; } .object01:hover{ width: 100px; height: 100px; background-color: blue; } |
【結果】
1-1、時間をかけてオンマウスでオブジェクトの色を変えたい
:hoverで色を変えたものを、さらに時間をかけて色が徐々に変わるようにしたい場合は、
「transition」というプロパティを使用します。
transitionは、時間的な変化を指定するプロパティです。
このtransitionでは、以下のプロパティをまとめて指定することができます。
transition-property … transitionを適用するCSSのプロパティ名(初期値：all)
transition-duration … 変化にかかる時間(初期値：０)
transition-timing-function … 変化の仕方(初期値：ease)
transition-delay … 変化がはじまる時間(初期値：０)
今回は「”background-color”を、 “0.5秒” で、 “一定の速度” で “オンマウスした0.3秒後” に変化させる」という指定をします。
【HTML】
|
1 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.object02{ width: 100px; height: 100px; background-color: red; } .object02:hover{ width: 100px; height: 100px; background-color: blue; transition: background-color 0.5s linear 0.3s ; } |
【結果】
時間をかけて変化させることで、よりアニメーションらしいイメージになりました！
2、クリックでオブジェクトの色を時間をかけて変化させたい
クリックしたときに変化を与えたい場合はjQueryを使用して、「この要素をクリックしたときに変化を指定したclassを与えてください」という指定をします。
【HTML】
|
1 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.object03{ width: 100px; height: 100px; background-color: red; } .object03_1{ width: 100px; height: 100px; background-color: blue; transition: background-color 0.5s linear 0.3s ; } |
【jQuery】
|
1 2 3 4 5 |
$(function(){ $('.object03').click(function(){ $('.object03').addClass('object03_1'); }); }); |
【結果】
クリックしたら背景色が変わるようになりましたね！
3、オブジェクトを回転させたい
オンマウスでオブジェクトを回転させる方法です。
オブジェクトを回転させるには「rotate」というプロパティを使用します。
【HTML】
|
1 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.object04{ width: 100px; height: 100px; background-color: red; } .object04:hover{ width: 100px; height: 100px; background-color: red; transition: 0.5s linear; transform: rotate(-45deg); } |
【結果】
オンマウスでオブジェクトが45度回転して表示されるようになりました。
3-1、オブジェクトをくるくる回転させたい
さらに、オブジェクトをくるくると回転させたい場合は、「animation」プロパティと、keyflamesの機能を使用します。
【HTML】
|
1 |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.object05{ width: 100px; height: 100px; background-color: red; } .object05:hover{ width: 100px; height: 100px; background-color: red; transition: 0.5s linear ; animation : rotate 0.5s linear 3; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
【結果】
オンマウスでオブジェクトがくるくる回転するようになりました。
animationは、オブジェクトの動きを指定するプロパティです。
このanimationでは、以下のプロパティをまとめて指定することができます。
animation-name … アニメーション名(keyframesを使用する時に指定できる、初期値：none)
animation-duration … アニメーション一回分の長さ(初期値：０)
animation-timing-function … 変化の仕方(初期値：ease)
animation-delay … アニメーションがはじまる時間(初期値：０)
animation-iteration-count … アニメーションの繰り返しの回数(初期値：１)
animation-direction … アニメーションの再生を通常と逆再生を繰り返すか(初期値：normal)
指定するものが多く感じるかもしれませんが、一度覚えてしまえば難しくないので、
ぜひ覚えて使えるようになりたいですね！
今回は「”回転” を、 “1回0.5秒” で、 “一定の速度” で “3回” アニメーションさせる」という指定です。
3-3、ハンバーガーメニューのボタンをクリックでバツ印にしたい
ちょっと前はハンバーガーメニューに批判的な意見が多かったですが、
いまはスマホサイトですっかり主流のデザインになりましたよね。
ミニマルデザインが流行りだしてからは、PCサイトでも使用されるようになりました。
回転のCSSを紹介したので、実用的な技術として、
ハンバーガーメニューのボタンをクリックでバツ印にする方法を紹介します。
【HTML】
|
1 2 3 4 5 6 |
MENU |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.menu-trigger .line { display: inline-block; transition: all .4s; box-sizing: border-box; z-index: 200; } .menu-trigger { position: relative; width: 30px; height: 23px; display: block; } .menu-trigger .line { position: absolute; left: 0; width: 100%; height: 3px; background-color: #000; border-radius: 3px; } .menu-trigger .line:nth-of-type(1) { top: 0; } .menu-trigger .line:nth-of-type(2) { top: 10px; } .menu-trigger .line:nth-of-type(3) { bottom: 0; } .menu-trigger span:nth-of-type(4) { position: absolute; bottom: -25px; left: -9px; } .menu-trigger.active .line:nth-of-type(1) { transform: translateY(13px) rotate(-45deg); transition: transform 0.1s linear ; } .menu-trigger.active .line:nth-of-type(2) { opacity: 0; } .menu-trigger.active .line:nth-of-type(3) { transform: translateY(-7px) rotate(45deg); transition: transform 0.1s linear ; } |
【jQuery】
|
1 2 3 4 5 6 7 |
$(function($) { $(document).ready(function() { $('.menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); }); |
【HTML】
jQueryのtoggleClassは「menu-trigger」に「active」というクラスがついていなければ、「active」を追加、ついていれば、削除する指定です。
クラス「active」がついたハンバーガーメニューの要素は、
１番目のラインと３番目のラインが「transform」でそれぞれ指定された斜めの角度に変形し、バツ印になります。
不要となった２番目のラインは、「opacity」で消しました。
まだハンバーガーメニューがわかりづらいと考えている人にもわかりやすいよう、
MENUの文字も追加しています。
まとめ
今回はCSSと簡単なjQueryでアニメーションを実装する方法を紹介しました。
応用を聞かせれば、javascriptを使っているようなアニメーションも作成することができるので、ぜひ技術を身につけて実装してみてください！
執筆者
DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。
うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。
この記事を読んだ人はこんな記事も読んでいます
CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。
将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。
サービス紹介
よくある質問
