この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
サイトに少しだけ動きをつけたいと思ったことはありませんか。
ボタンにカーソルを合わせたときにふわっと色が変わる。
ページを開いたときに文字がすっと浮かび上がる。
こうした動きはCSSだけで作れます。
この記事ではtransitionとanimationの使い分けを整理したうえで、コピペしてすぐ使える見本を10パターン紹介します。
実際に動くプレビューを置いているので、見て選んでそのままコピーしてください。
transitionとanimationの違い
最初にここを押さえておくと、あとの作業がとても楽になります。
ざっくり言うと、transitionは「AからBへ変わるときの動き」を指定するものです。
マウスを乗せた、クリックした、といったきっかけが必要になります。
いっぽうanimationは「動きの流れそのもの」を作るものです。
きっかけがなくても勝手に動き出しますし、繰り返しもできます。
- hoverで色が変わる、浮き上がる → transition
- 読み込んだ瞬間にふわっと出る → animation
- ずっとくるくる回り続ける → animation
- 途中の細かい動きを指定したい → animation
迷ったら「きっかけがあるかどうか」で判断してみてください。
transitionの基本を10秒で
transitionは4つの値をまとめて書くだけです。
.button {
background: #4a90d9;
/* 何を / どれくらいの時間で / どんな速さで / いつから */
transition: background 0.3s ease 0s;
}
.button:hover {
background: #2a6fb8;
}大事なのは、transitionは「変化する前」の状態に書くという点です。
hoverのほうに書いてしまうと、マウスを外したときの動きがカクッと消えてしまいます。
イージングで印象が変わる
3つめの値であるイージング（timing-function）は、動きの速度カーブを決めるものです。
同じ0.6秒でも、印象がかなり変わります。
下のエリアにマウスを乗せて（スマホはタップして）見比べてみてください。
この枠にマウスを乗せると動きます
linearは一定の速さで、機械的な印象になります。
easeは最初が速く終わりがゆっくりで、いちばん自然に見えます。
いちばん下のcubic-bezierは、行きすぎてから戻る動きです。
ぽよんとした可愛らしさが出るので、ボタンなどで人気があります。
/* 行きすぎてから戻る、ぽよんとした動き */
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);hoverで使えるtransition見本5つ
ここからは実際の見本です。
気に入ったものをコピーして、色やサイズだけ調整すれば使えます。
1. 色がふわっと変わるボタン
.btn-fade {
display: inline-block;
padding: 12px 32px;
border-radius: 6px;
background: #4a90d9;
color: #fff;
text-decoration: none;
font-weight: bold;
transition: background 0.3s ease, color 0.3s ease;
}
.btn-fade:hover {
background: #1f4f80;
color: #ffe9a8;
}いちばん基本の形です。
複数のプロパティを動かすときは、カンマで区切って並べます。
2. ふわっと浮き上がるカード
.card-lift {
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}浮き上がりを自然に見せるコツは、影も同時に大きくすることです。
位置だけ動かすと、平面的で不自然に見えてしまいます。
なお、位置を動かすときはtopやmarginではなくtransformを使ってください。
transformのほうが動作が軽く、カクつきにくくなります。
3. 下線が左から伸びるリンク
.link-underline {
position: relative;
display: inline-block;
text-decoration: none;
padding-bottom: 4px;
}
.link-underline::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #e5735a;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.link-underline:hover::after {
transform: scaleX(1);
}widthを0から100%に変えても同じ見た目になります。
ただしscaleXのほうが動きがなめらかです。
transform-originを right にすれば、右から伸びる下線になります。
4. 画像がゆっくりズームする
/* 親ではみ出しを隠すのがポイント */
.zoom-frame {
overflow: hidden;
border-radius: 10px;
}
.zoom-frame img {
display: block;
width: 100%;
transition: transform 0.6s ease;
}
.zoom-frame:hover img {
transform: scale(1.15);
}<div class="zoom-frame">
<img src="画像のURL" alt="サンプル画像">
</div>ここでいちばん大事なのが、親要素のoverflow: hiddenです。
これがないと、拡大した画像が枠からはみ出してしまいます。
アイキャッチ付きの記事一覧に入れると、ぐっと今どきの見た目になります。
カード型の一覧デザインはCSSカードデザイン見本集でもまとめています。
5. 矢印がスッと右に動く
.btn-arrow {
display: inline-block;
padding: 12px 28px;
border-radius: 999px;
background: #333;
color: #fff;
text-decoration: none;
transition: background 0.3s ease;
}
.btn-arrow:hover {
background: #e5735a;
}
.btn-arrow .arrow {
display: inline-block;
margin-left: 8px;
transition: transform 0.3s ease;
}
.btn-arrow:hover .arrow {
transform: translateX(6px);
}<a href="#" class="btn-arrow">
続きを読む
<span class="arrow">→</span>
</a>親にhoverしたときに、中の要素を動かすパターンです。
「進む感じ」が伝わるので、記事一覧のリンクと相性がいいです。
ボタンそのもののデザインはCSSボタンデザイン見本集にまとめています。
@keyframesで動かすアニメーション見本5つ
ここからはanimationの出番です。
まず@keyframesで動きの流れを作り、それを要素に割り当てます。
なお下のプレビューは、動きが分かるように繰り返し再生しています。
コード側は1回だけ再生する形になっているので、そのままコピーして大丈夫です。
6. ふわっと表示されるフェードイン
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.8s ease forwards;
}最後のforwardsは「終わった状態のまま止まる」という意味です。
これを書き忘れると、動きが終わった瞬間に元に戻って消えてしまいます。
フェードインでいちばん多いつまずきポイントです。
7. 下からすっと出るスライドイン
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-up {
animation: slideUp 0.6s ease forwards;
}フェードインに動きを足しただけですが、印象がぐっと良くなります。
見出しや画像に使うと、ページ全体が丁寧に見えます。
複数の要素に順番に出したいときは、delayをずらします。
/* 0.15秒ずつ遅らせて、順番に出す */
.slide-up:nth-child(1) { animation-delay: 0s; }
.slide-up:nth-child(2) { animation-delay: 0.15s; }
.slide-up:nth-child(3) { animation-delay: 0.3s; }8. ゆらゆら揺れるアイコン
@keyframes wiggle {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
}
.wiggle {
display: inline-block;
/* 揺れの支点を下寄りにする */
transform-origin: 50% 90%;
animation: wiggle 1.2s ease-in-out infinite;
}transform-originで回転の支点を変えているのがポイントです。
初期値の中央のままだと、その場でくるくるするだけになります。
支点を下にすると、ベルが揺れているような動きになります。
ずっと揺れていると気が散るので、注目させたい1か所だけに使ってください。
9. くるくる回るローディング
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #e0e6ec;
/* 上だけ色を変えて、回転が見えるようにする */
border-top-color: #4a90d9;
border-radius: 50%;
animation: spin 0.9s linear infinite;
}画像を使わずに、枠線だけで作れるローディングです。
4辺のうち上だけ色を変えることで、回っているのが分かります。
回転はlinearで一定にするほうが自然に見えます。
10. ぽよんと弾むバウンス
@keyframes bounce {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(-14px); }
60% { transform: translateY(-6px); }
}
.bounce {
display: inline-block;
animation: bounce 1.4s ease-in-out infinite;
}60%のところで少しだけ跳ね返しを入れているのがコツです。
上がって下がるだけだと、ボールが弾む感じが出ません。
申し込みボタンなど、押してほしい場所に効きます。
スクロールしたら動かしたいとき
「画面に入ってきたタイミングでふわっと出したい」という要望はとても多いです。
これまではJavaScriptが必要でしたが、CSSだけで書ける方法が登場しました。
@keyframes scrollFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scroll-fade {
animation: scrollFadeIn linear both;
/* 自分が画面に入ってくる動きに合わせて再生する */
animation-timeline: view();
/* 下から20%入った時点で始まり、40%手前で終わる */
animation-range: entry 20% cover 40%;
}
/* 未対応ブラウザでは何も起きずに普通に表示される */
@supports not (animation-timeline: view()) {
.scroll-fade { animation: none; }
}ただしanimation-timelineは対応ブラウザがまだ限られます。
Chromeやモダンなブラウザでは動きますが、環境によっては何も起きません。
そのため、動かなくても困らない場面だけで使うのが安全です。
上のコードのように@supportsで囲っておけば、未対応でも普通に表示されるので崩れません。
お問い合わせボタンなど、必ず見せたい要素には使わないでください。
動きが苦手な人への配慮も忘れずに
画面の動きで気分が悪くなる方がいます。
そういった方は、OS側で「視差効果を減らす」という設定をオンにしています。
CSSではその設定を読み取れるので、次の3行を書いておくだけで配慮できます。
/* 動きを減らす設定の人には、アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}追加CSSの最後にそのまま貼っておけば大丈夫です。
ほとんどの人には何の影響もありません。
それでいて、必要な人にはきちんと届く。
コストがほぼゼロなので、入れておいて損はないです。
動かないときのチェックポイント
コピペしたのに動かない。
そんなときは、だいたい次のどれかです。
transitionを:hoverのほうに書いている
transitionは変化する前の状態に書きます。
:hoverに書くと、マウスを外したときの動きがなくなります。
display: none を動かそうとしている
displayはtransitionが効かないプロパティです。
消したり出したりしたいときは、opacityとvisibilityを組み合わせます。
.panel {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.panel.is-open {
opacity: 1;
visibility: visible;
}インライン要素にtransformを使っている
spanなどのインライン要素には、transformが効きません。
display: inline-block を足せば動くようになります。
既存WordPressテーマのスタイルが優先されている
既存WordPressテーマ（当サイト使用のSANGO）のボタンやリンクには、もともとtransitionが設定されています。
そのため、自分で書いた指定が上書きされないことがあります。
その場合は独自のクラス名を付けて、そのクラスに対して指定してください。
それでも効かないときは !important を付けます。
ただし他のテーマでは不要なケースが多いので、まずはクラス名を分ける方法から試してみてください。
CSSをWordPressに追加する方法
この記事のCSSは、外観→カスタマイズ→追加CSSに貼り付ければすぐ使えます。
ただし量が増えてきたら、別の管理方法のほうが楽になります。
追加CSS、子テーマ、ブロックスタイルなどの違いはWordPressにCSSを追加する方法でまとめています。
どこに書けばいいか迷ったら、先にそちらを読んでみてください。
まとめ
最後にもう一度だけ整理します。
- きっかけがある動きはtransition、自動で動くならanimation
- transitionは変化する前の状態に書く
- 位置やサイズはtransformで動かすと軽い
- フェードインにはforwardsを忘れずに
- prefers-reduced-motionへの配慮も入れておく
動きは足しすぎると読みにくくなります。
1ページに1つか2つ、見せたい場所だけに使うくらいがちょうどいいです。
