【コピペでOK】サイトに動きをつけるCSSアニメーションまとめてみた

WEB制作

【コピペで使える】CSSアニメーション実装まとめ（サンプルコード付き）

近年では、Webサイトに動きを加えるアニメーションの活用が一般的になりつつあります。中でも重要な要素に動きをつけることで、ユーザーの関心を引いたり、ページを飽きずに読み進めてもらうための工夫として有効です。

そこで本記事では、表現しづらい「動きのニュアンス」に焦点を当て、シンプル・ポップ・スタイリッシュ・柔らかい印象など、イメージ別にのコードを紹介します。
すべてデモとサンプルコード付きで掲載しているので、気に入った動きをそのままコピーしてすぐに導入できます。

今回紹介するアニメーションは、多くがCSSのanimationプロパティを用いて実装されています。記事の前半では、基本的な書き方についても簡単に解説しています。

補足：アニメーションの追加について

この章では、以下のHTML・CSSをベーススタイルとして、さまざまなCSSアニメーションを加えていきます。
ただし、アニメーションの種類によってはこのベースを使用せず、独自のHTML・CSSとセットで記載する場合もあります。その際は、サンプルコード内にHTMLとCSSの両方を記載します。

また、サンプルコードではベンダープレフィックス（-webkit-, -moz-など）を省略しています。必要に応じて環境に合わせて追加してください。

html

<div class=”anim-box”></div>

——

css

.anim-box {
background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
border-radius: 5px;
max-width: 400px;
height: 250px;
}

【解説】CSS animationプロパティの基本

この記事で紹介するアニメーションは、主にCSSのanimationプロパティを使用しています。
このプロパティをあまり使い慣れていない方は、ぜひここで基本を押さえておきましょう。

animationの書き方（ショートハンド）

CSSでは、以下のように複数のアニメーション設定を1行にまとめて記述できます。これをショートハンド記法と呼びます。

css
animation: animationName 1s ease 0.5s infinite alternate forwards;

この記述を個別に分けると、以下のようになります↓

css
animation-name: animationName;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;

1項目ずつ書くと理解しやすい反面、コードが長くなりがちなので、慣れてきたらショートハンドでの記述が便利です。

各プロパティの解説

animation-name

アニメーション名を指定します。
事前に以下のように@keyframesで定義した名前を使用します。

css
@keyframes animationName {
0% { opacity: 0; }
100% { opacity: 1; }
}

animation-duration

アニメーションの再生時間を設定します。単位はs（秒）またはms（ミリ秒）で指定します。
例：1s, 500ms

animation-timing-function

動きの速さの変化（イージング）を指定します。主な値：

  • ease：自然な加速と減速（初期値）

  • ease-in：ゆっくり始まる

  • ease-out：ゆっくり終わる

  • ease-in-out：ゆっくり始まり、ゆっくり終わる（より滑らかな動き）

  • linear：一定の速さで進行

  • steps()：コマ送り風の動き

カスタムイージングには cubic-bezier() も利用可能です。

animation-delay

アニメーションの開始を遅らせる時間を設定します。
正の値で遅延、負の値で途中から再生することもできます。

例：0.5s, -1s

animation-iteration-count

アニメーションの繰り返し回数を設定します。指定できる値：

  • 数値（例：1, 3, 0.5）

  • infinite（無限ループ）

animation-direction

アニメーションの再生方向を制御します。

  • normal：順方向に再生（初期値）

  • reverse：逆方向に再生

  • alternate：順方向 → 逆方向 → 順方向…と交互に再生

  • alternate-reverse：逆方向 → 順方向 → 逆方向…と交互に再生

animation-fill-mode

アニメーションの開始前・終了後に、どのスタイルを適用するかを決めます。

  • none：アニメーション外では何も適用しない（初期値）

  • forwards：終了後のスタイルを保持

  • backwards：開始前に最初のスタイルを適用

  • both：forwardsとbackwardsの両方を適用

以上の基本コードを認識した上で、次は、実装したいアニメーションを選びcssを参考にしてみてください。

目次

  1. シンプル・綺麗・分かりやすい系

    • フェードイン

    • スライドイン

    • ズームイン

  2. ポップ・元気な印象

    • バウンド（ぽよよんと跳ねる）

    • ななめから出現

    • ポップアップ表示

    • リズミカルな収縮アニメ

  3. スタイリッシュ・スピーディー

    • きらりと光る演出

    • 流れる背景色

    • 文字がぬるりと出現

    • 背景色が消えてから表示

    • ラインが伸びる動き

  4. かわいい・柔らかい印象

    • フェードアップ

    • 緩やかなボーダー出現

    • スムーズに表示される文字

    • ゆったりスクロールボタン

    • ふわふわ揺れる演出

    • 回転しながらの登場

①【シンプル・わかりやすい・きれい】定番のCSSアニメーション3選

ここでは、コーポレートサイトやサービスサイトなど、幅広い用途に使えるスタンダードなCSSアニメーションをご紹介します。
どれも導入しやすく、UI演出の第一歩としておすすめです。

1. フェードイン

概要：
ページの読み込み時やスクロール時に、要素がふわっと表示される定番アニメーション。
迷ったときはこれを使えば間違いありません。

サンプルコード：

css

.anim-box.fadein.is-animated {
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

2. スライドイン

概要：
左右から要素が順に出るアニメーション。
見出しやテキストブロックに動きを加えたいときに便利です。

サンプルコード：

css

.anim-box.slidein.is-animated {
animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
0% {
transform: translateX(180px);
opacity: 0;
}
40%, 100% {
transform: translateX(0);
opacity: 1;
}
}

3. ズームイン

概要：
要素が拡大しながら表示されるアニメーション。
CTAボタンやバナーなど、注目させたい要素に最適です。スライダー画像などに応用することで、よりリッチな演出も可能です。

サンプルコード：

css

.anim-box.zoomin.is-animated {
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

②【ポップ・勢いがある】元気で明るいCSSアニメーション集

ここでは、明るくて親しみやすい印象を与える「ポップ」なCSSアニメーションをご紹介します。
子ども向けのサイトやエンタメ系、アプリのUIなどにも相性が良く、要素を目立たせたいときに最適です。

1. ぽよよんと跳ねる

概要：
スライドイン＋跳ねる動きで、勢いのある演出に。
スライドなしでその場で跳ねる、ホバーで跳ねさせるなど、使い方もさまざまです。

サンプルコード：

css

.anim-box.poyoyon.is-animated {
animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) forwards;
}

@keyframes poyoyon {
0% { transform: translateX(140px); opacity: 0; }
50% { transform: translateX(0); }
65% { transform: translateX(30px); }
100% { transform: translateX(0); }
20%, 100% { opacity: 1; }
}

2. ぽよよんと跳ねる（上下揺れ）

概要：
スケールと移動を組み合わせて、上下に揺れるような動き。
アイコンやイラストに使うと、親しみやすくかわいらしい印象になります。

css

.anim-box.poyoyon2.is-animated {
animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
0% { transform: scale(1.0) translate(0, 0); }
15% { transform: scale(0.98, 0.9) translate(0, 5px); }
30% { transform: scale(1.02, 1.0) translate(0, 8px); }
50% { transform: scale(0.98, 1.05) translate(0, -8px); }
70% { transform: scale(1.0, 0.9) translate(0, 5px); }
100% { transform: scale(1.0) translate(0, 0); }
0%, 100% { opacity: 1; }
}


3. ゼリーのようにぷるぷる揺れる

概要：
一定の間隔で揺れ続けるアニメーション。
ボタンやバナーなど、注目させたい要素にぴったりです。

css

.anim-box.poyoyon3.is-animated {
animation: poyoyon3 2.5s infinite;
opacity: 1;
}

@keyframes poyoyon3 {
0%, 40% { transform: skew(0deg, 0deg); }
5% { transform: skew(5deg, 5deg); }
10% { transform: skew(-4deg, -4deg); }
15% { transform: skew(3deg, 3deg); }
20% { transform: skew(-2deg, -2deg); }
25% { transform: skew(1deg, 1deg); }
30% { transform: skew(-0.6deg, -0.6deg); }
35% { transform: skew(0.3deg, 0.3deg); }
}


4. ななめからスライドイン

概要：
右下から斜めに滑り込むような演出で、勢いとインパクトをプラス。
複数の要素で左右交互に表示させると、より動きにリズムが出ます。

css

.anim-box.slide-skew.is-animated {
animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slide-skew {
0% { transform: translate(180px, 30px); opacity: 0; }
100% { transform: translate(0, 0); }
20%, 100% { opacity: 1; }
}

5. ポップアップ（スライドアップ＋フェードイン）

概要：
下からスライドしながらふわっと表示される演出。
モーダルやバナー、CTAボタンなどにおすすめです。

css

.anim-box.popup.is-animated {
animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
0% {
transform: translateY(40px) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
opacity: 1;
}
80%, 100% {
opacity: 1;
}
}

6. ぽよぽよ収縮する

概要：
ボタンや小さなアイコンに設定することで、視線を集める効果があります。
「ここを押して」と伝えたいときに便利です。

css

.anim-box.poyopoyo {
animation: poyopoyo 2s ease-out infinite;
opacity: 1;
}

@keyframes poyopoyo {
0%, 40%, 60%, 80% {
transform: scale(1.0);
}
50%, 70% {
transform: scale(0.95);
}
}

.anim-box.poyopoyo {
animation: poyopoyo 2s ease-out infinite;
opacity: 1;
}

@keyframes poyopoyo {
0%, 40%, 60%, 80% {
transform: scale(1.0);
}
50%, 70% {
transform: scale(0.95);
}
}

③【スタイリッシュ・かっこいい・スピーディー】洗練されたCSSアニメーションまとめ

動きにスピード感と洗練さを加えたいときに活躍する、スタイリッシュなアニメーションを厳選して紹介します。
ボタン・見出し・ビジュアルエリアなど、印象づけたい要素にぜひ活用してみてください。

1. きらんと光る（ホバーアニメーション）

カーソルを合わせた時に、要素の上を斜めに光が走るアニメーションです。
ボタンやバナーのホバーエフェクトを、よりリッチで目を引く印象に仕上げます。

css

.anim-box.kiran {
position: relative;
overflow: hidden;
cursor: pointer;
}

.anim-box.kiran::before {
content: “”;
position: absolute;
top: -100px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
opacity: 0;
transition: cubic-bezier(0.32, 0, 0.67, 0);
}

.anim-box.kiran:hover::before {
animation: kiran 0.5s linear;
}

@keyframes kiran {
0% { transform: scale(2) rotate(45deg); opacity: 0; }
20% { transform: scale(20) rotate(45deg); opacity: 0.6; }
40% { transform: scale(30) rotate(45deg); opacity: 0.4; }
80% { transform: scale(45) rotate(45deg); opacity: 0.2; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }

2. 背景色が流れてくる（マスキングテープのような）

背景色が左から右へ広がるように表示されるアニメーション。
キャッチコピーやタイトルに使うと、デザイン性がぐっと上がります。

html
<div class=”bg is-animated”>
<span class=”bg-wrap”><span class=”inn”>背景色が流れてくる</span></span><br>
<span class=”bg-wrap”><span class=”inn”>アニメーション</span></span>
</div>
——-
css

.bg .bg-wrap {
position: relative;
display: inline-block;
margin-top: 5px;
}

.bg.is-animated .bg-wrap::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #362ae0, #3b79cc, #42d3ed);
transform-origin: left center;
animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.bg .bg-wrap .inn {
position: relative;
z-index: 1;
font-size: 36px;
font-weight: bold;
color: #fff;
padding: 5px 15px;
display: inline-block;
}

@keyframes bg {
0% { opacity: 0; transform: scaleX(0) translateX(-5%); }
30% { opacity: 1; transform: scaleX(1) translateX(0); }
100% { transform: scaleX(1); }
}

3. 文字がぬるりと現れる（matrix + transition）

下からテキストが滑らかに現れるアニメーション。
背景がなくても雰囲気が出せるため、シンプルで洗練された印象に仕上がります。

html
<div class="matrix is-animated">
<span class="bg-wrap"><span class="inn large">文字がぬるりと現れる</span></span>
<span class="bg-wrap"><span class="inn small">サンプルテキスト...</span></span>
</div>
css

.kurukuru.is-animated {
animation: kurukuru 1.4s ease-out;
}

@keyframes kurukuru {
0% { transform: rotateY(0deg) translateY(40px); opacity: 0; }
100% { transform: rotateY(360deg) translateY(0); opacity: 1; }
}

※ matrix() は translateY() を含む6つの変形値をまとめて扱える関数です。

4. 背景色が消えてから文字が出る（マスク効果）

テキストにかぶるように背景色が下から上へスライドし、退けたあとにテキストが現れます。

html
<div class=”mask-bg is-animated”>背景色が消えてから表示される</div>
——
css

.mask-bg {
font-size: 36px;
font-weight: bold;
color: transparent;
overflow: hidden;
position: relative;
transition: color 0ms 450ms;
}

.mask-bg::after {
content: ”;
background: linear-gradient(to right, #362ae0, #3b79cc, #42d3ed);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
transform: translateY(100%);
}

.mask-bg.is-animated {
color: #362ae0;
}
.mask-bg.is-animated::after {
animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.17, 1);
}

@keyframes mask-bg {
0% { transform: translateY(101%); }
40% { transform: translateY(0); }
60% { transform: translateY(0); }
100% { transform: translateY(-100%); }
}

5. 線が伸びる（シンプルな横線アニメーション）

中央から左右に向かって線が広がる演出。
見出しやボタンの下線演出、ローディングバーにも応用可能です。

html
<div class=”line anim”></div>
css
.line {
position: relative;
}
.line::after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
height: 1px;
width: 0;
background: linear-gradient(to right, #362ae0, #3b79cc, #42d3ed);
transform: translateX(-50%);
transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.line.is-animated::after {
width: 100%;
}

④【かわいい・柔らかい印象】優しい動きのCSSアニメーション集

女性向け・美容系・育児系など、穏やかで親しみやすいデザインが求められる場面で活躍する、ふんわり可愛らしいアニメーションをご紹介します。

1. フェードアップ

フェードイン＋スライドインの組み合わせ。
動きに程よい存在感を持たせながらも、優しい印象を演出します。

css

.anim-box.fadeup.is-animated {
animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeup {
0% { transform: translateY(30px); opacity: 0; }
80% { opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}


2. ボーダーが緩やかにつく

四方の枠線がふわっと伸びて表示されます。
コンテンツ枠に使うとやさしいアクセントになります。

html
<div class=”stroke anim”>
<div class=”border top”></div>
<div class=”border right”></div>
<div class=”border bottom”></div>
<div class=”border left”></div>
</div>
———-
css

.stroke .border {
position: absolute;
opacity: 0;
}

.stroke.is-animated .border {
opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
0% { width: 0; opacity: 1; }
100% { width: calc(100% – 20px); }
}
@keyframes stroke-height {
0% { height: 0; opacity: 1; }
100% { height: calc(100% – 20px); }
}

3. 文字が滑らかに表示される

clip-path を使用し、文字がスッと表示される印象を与えます。
落ち着いた印象の見出しやロゴに最適。

css
.smooth {
clip-path: inset(0 100% 0 0);
font-size: 36px;
font-weight: bold;
transition: clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1);
}
.smooth.is-animated {
clip-path: inset(0);
}

4. ゆったりスクロールボタン

「Scroll」を促すためのアニメーション。
縦長サイトやフルスクリーンのMV下に設置すると効果的です。

css

.scroll::before {
animation: scroll 3.5s infinite;
border: solid #000;
border-width: 0 0 1px 1px;
transform: rotate(-45deg);
}

@keyframes scroll {
0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; }
40% { opacity: 1; }
80% { transform: rotate(-45deg) translate(-30px, 30px); opacity: 0; }
100% { opacity: 0; }
}

5. ふわふわ揺れる

アイコンなどがやわらかく揺れる演出。
イラストやデコレーションパーツに使うと癒し系の印象を与えられます。

css

.fuwafuwa {
animation: fuwafuwa 3s ease-in-out infinite alternate;
}

@keyframes fuwafuwa {
0% { transform: translate(0, 0) rotate(-7deg); }
50% { transform: translate(0, -7px) rotate(0deg); }
100% { transform: translate(0, 0) rotate(7deg); }
}

6. くるくる回りながら出現

回転しながらふわっと登場するアニメーション。
アイコンやナンバーの出現におすすめ。

css

.kurukuru.is-animated {
animation: kurukuru 1.4s ease-out;
}

@keyframes kurukuru {
0% { transform: rotateY(0deg) translateY(40px); opacity: 0; }
100% { transform: rotateY(360deg) translateY(0); opacity: 1; }
}

 

 

いかがでしたか？実装したいアニメーションを選び、ぜひcssコードを参考にしてみてください。