「サイトに動きをつけたいけれど、やりすぎると安っぽく見えそう」——そんな不安から、結局まったく動きのないページになっていませんか。実は、おしゃれに見えるCSSアニメーションのほとんどは数行のコードで作れます。
ここでは、コピペしてすぐ試せる実例と、素人っぽく見えないための調整の勘所をあわせて紹介します。
おしゃれに見えるアニメーションの共通点
派手さより「気づかれないくらい自然」が正解です。実例を見る前に、3つの原則を押さえておきましょう。
- 時間は0.2〜0.4秒：0.6秒を超えると「もっさり」感じます。UI操作の反応は0.2秒前後が快適です
- 動く距離は小さく：出現アニメの移動量は10〜20pxで十分。50px動かすと落ち着きがなくなります
- イージングを必ず指定：
linearは機械的に見えます。ease-outかcubic-bezierを使います
実例1：hoverで下線が伸びるリンク
テキストリンクに使うだけで、一気に洗練された印象になります。
.link {
position: relative;
text-decoration: none;
color: #222;
}
.link::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 1px;
background: #222;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease-out;
}
.link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
勘所：transform-originをhover前後で入れ替えるのがポイントです。これで「右から消えて、左から伸びる」動きになり、単純な伸縮より上品に見えます。
ホバー演出を極めるとこうなる、という実物も置いておきます。
実例2：スクロールで要素がふわっと出現
サービス紹介やカードの一覧で定番の演出です。JavaScriptは数行で済みます。
.fade-up {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-up.is-visible {
opacity: 1;
transform: translateY(0);
}
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("is-visible");
io.unobserve(e.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll(".fade-up").forEach((el) => io.observe(el));
勘所：threshold: 0.15は「要素の15%が画面に入ったら発火」という意味です。0にすると端がかすった瞬間に動いてしまうので、0.1〜0.2が扱いやすい値です。カードを複数並べるときは、transition-delayを0.08秒ずつずらすと順番に現れて印象的になります。
.card:nth-child(2) { transition-delay: 0.08s; }
.card:nth-child(3) { transition-delay: 0.16s; }
実例3：押した感のあるCTAボタン
問い合わせボタンは、反応があるだけでクリック率の体感が変わります。
.btn {
padding: 14px 32px;
border-radius: 6px;
background: #2563eb;
color: #fff;
transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.btn:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}
勘所：:hoverだけでなく:activeまで書くと「押し込んだ」感触が出ます。移動量は2px程度で十分です。
ボタン系の完成形の実物はこちら。光沢が走る定番の演出です。
やりすぎを防ぐチェックリスト
- 1画面に動く要素は2〜3種類まで。全部動くと視線が定まりません
widthやtopではなくtransformとopacityをアニメーションさせる（描画負荷が軽く、カクつきにくい）- スマホでは
:hoverが効かないため、タップ操作でも成立するか確認する - 動きが苦手なユーザー向けに、次の指定を入れておくと親切です
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
実例をまとめて見たいときは
とはいえ、コードだけ見ても仕上がりは想像しにくいものです。動いている状態を先に見て、自社サイトに合うものを選びたい場合は、Webパーツ集のmotionAETHERのようなカタログが参考になります。500点のパーツが実際に動く状態で並んでいて無料で閲覧できるので、「この速さ、この距離感なら自社サイトに合いそう」という感覚をつかむのに向いています。
まとめ
おしゃれなCSSアニメーションは、0.3秒・16px・ease-outという小さな数値の積み重ねで作れます。まずは記事内のhover下線かCTAボタンを1つ、自社サイトにコピペして反応を確かめてみてください。