はじめに

フロントエンド開発をしていると、「押したくなるようなボタンにしたい」「ユーザーが直感的に操作できるようにしたい」と感じることがあります。
そんなときに活用できるのが、CSSによるアニメーションです。

transitionやtransformなどのCSSプロパティを組み合わせることで、UIにさまざまな動きを加えることができます。

これまで使用してきたCSSアニメーションを、自身の知識の整理を兼ねてまとめました。

目次

はじめに
この記事の対象読者
前提条件・環境
1. CSSアニメーションでよく使うプロパティ
- 1-1. transition
- 1-2. transform
2. リッチなアニメーション集
- 2-1. ボタンのアニメーション
- 2-2. カードのアニメーション
まとめ

この記事の対象読者

HTML/CSSの基礎を学び実務に生かしたい方
transitionやtransformのプロパティの使い方を学びたい方
CSSアニメーションを使ってリッチなUI表現を作ってみたい方

前提条件・環境

前提知識： HTML/CSSの基本的な書き方、:hoverの基本を理解していること
使用技術： HTML / CSS

1. CSSアニメーションでよく使うプロパティ

今回紹介するCSSアニメーションでは、主にtransitionやtransformを使用します。
まずは、それぞれの基本的な動きを解説します。

1-1. transition

transitionは、CSSの変化を滑らかにするプロパティです。
CSSの値が変化するときに、指定した時間をかけて徐々に変化させることができます。

例えば、ボタンのホバー時に文字色や背景色を変更する場合、transitionを指定することで、色がじんわりと変化し、より柔らかく自然な印象になります。

transitionあり・なしで、ボタンの色が変化するスピードを比較してみます。

▼transition あり・なしの比較

See the Pen transitionの比較 (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<!-- transition あり -->
<div class="item">
  <span>あり（滑らかに変化）</span>
    <div class="btn1">ボタン</div>
</div>

<!-- transition なし -->
<div class="item">
  <span>なし（瞬時に変化）</span>
  <div class="btn2">ボタン</div>
</div>

CSS

/* -- transition あり -- */
.btn1 {
  max-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  color: #ffffff;
  background-color: #D20B08;
  border: 2px solid #D20B08;
  transition: all 0.4s ease; /* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.btn1:hover {
  color: #D20B08;
  background-color: #ffffff;
}

/* -- transition なし -- */
.btn2 {
  max-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  color: #ffffff;
  background-color: #D20B08;
  border: 2px solid #D20B08;
}

/* ホバー時 */
.btn2:hover {
  color: #D20B08;
  background-color: #ffffff;
}

・解説
transitionありのボタンには、transition: all 0.4s ease;を指定しています。
これは、0.4秒かけてCSSを変化させるという指定です。

指定値	意味
all	変化するプロパティをすべて対象とする
0.4s	0.4秒かけて変化させる
ease	変化の開始と終了をゆるやかにする

今回の例では、ホバー時にcolorとbackground-colorの複数のプロパティが変化するデザインのため、allを指定することで、変化するプロパティをすべて対象としています。
また、easeは変化の仕方を指定する値で、開始と終了がゆっくりと変化します。
他にもさまざまな指定値がありますが、今回は分かりやすさを優先してallとeaseを使用します。

.btn1 {
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.btn1:hover {
	color: #D20B08;
	background-color: #ffffff;
}

このようにtransitionを設定することで、CSSの変化を滑らかなアニメーションにすることができます。

1-2. transform

transformは、要素の移動・拡大・縮小・回転などを行うプロパティです。
要素を現在位置から移動させたり、大きさや角度を変化させることができます。

ここでは、transformを使った以下の例を紹介します。

ボタンを少し上に浮かせる
ボタンの矢印を右に移動させる
ボタンをひとまわり大きくする

▼transformの使用例

See the Pen transformの例 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<!-- translateY -->
<div class="item">
    <span>少し上に浮かせる(translateY)</span>
    <a class="btn __y">ボタン1</a>
</div>

<!-- translateX -->
<div class="item">
    <span>矢印を右に移動させる(translateX)</span>
    <a class="btn __x">ボタン2<span class="arrow">→</span></a>
</div>

<!-- scale -->
<div class="item">
    <span>ひとまわり大きくする(scale)</span>
    <a class="btn __scale">ボタン3</a>
</div>

CSS

/* -- ボタンの共通スタイル -- */
.btn {
	max-width: 120px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 6px;
	cursor: pointer;
	color: #ffffff;
	background-color: #D20B08;
	border: 2px solid #D20B08;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

/* -- translateY -- */
/* ホバー時 */
.btn.__y:hover {
	transform: translateY(-6px); /* Y軸方向へ-6px移動 */
}

/* -- translateX -- */
/* 矢印*/
.btn.__x .arrow {
	padding-left: 16px;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.btn.__x:hover .arrow {
	transform: translateX(6px); /* X軸方向へ6px移動 */
}


/* -- scale -- */
/* ホバー時 */
.btn.__scale:hover {
	transform: scale(1.1); /* 元のサイズの1.1倍拡大 */
}

・解説
transformは、translate()やscale()などを使って、要素の位置や大きさを変化させることができます。

①要素を移動させる：`translate()`

translate()は、要素を現在の位置から指定した分だけ移動させます。
X軸方向にはtranslateX()、Y軸方向にはtranslateY()を使用します。
X軸とY軸の両方を同時に指定する場合は、translate()を使用します。

指定値	動き
translateX(6px)	X軸方向に6px、右へ移動
translateX(-6px)	X軸方向に-6px、左へ移動
translateY(-6px)	Y軸方向に-6px、上へ移動
translateY(6px)	Y軸方向に6px、下へ移動
translate(6px, -6px)	X軸方向に6px、Y軸方向に-6px、右上へ移動

▼ボタン1：上へ移動

.btn {
    transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.btn.__y:hover {
	transform: translateY(-6px); /* Y軸方向へ-6px移動 */
}

translateY()は、Y軸（縦）方向に移動させます。
-6pxを指定しているため、元の位置から6px上へ移動します。

▼ボタン2：右へ移動

/* 矢印*/
.btn.__x .arrow {
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.btn.__x:hover .arrow {
	transform: translateX(6px); /* X軸方向へ6px移動 */
}

translateX()はX軸（横）方向に移動させます。
矢印に対して6pxを指定しているため、元の位置から6px右へ移動します。

②要素を拡大・縮小する：`scale()`

scale()は、要素を元のサイズを基準に拡大・縮小します。
元のサイズを1とし、1より大きい値を指定すると拡大、1より小さい値を指定すると縮小します。

▼ボタン3：1.1倍に拡大

.btn.__scale:hover {
	transform: scale(1.1); /* 元のサイズの1.1倍拡大 */
}

scale(1.1)を指定しているため、元のサイズから1.1倍に拡大します。
小さくする場合は、scale(0.9)とすると、元のサイズの90%に縮小できます。

2. リッチなアニメーション集

ここからは、transitionとtransformを組み合わせて、よりリッチなUIアニメーションアイデアを紹介していきます。
今回は、活用しやすいボタンとカードに関するUIを中心に紹介します。

2-1. ボタンのアニメーション

①下線が左から右へ伸びる

ホバーすると、ボタンの下線が左から右へ伸びるアニメーションです。
また、矢印も少し右へ移動させることで、シンプルながらも動きのある表現にしています。

【使用しているCSS】
transition: all 0.4s ease; 下線と矢印の変化を滑らかにする
transform: translateX(6px); 矢印を右へ移動

See the Pen btn02 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<div class="item">
    <span>左から右へ線が伸びる</span>
    <a class="btn">
        <span class="btn_text">view more</span>
    </a>
</div>

CSS

.btn {
	position: relative;
	max-width: 120px;
	display: flex;	
	padding: 12px 20px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	color: #D20B08;
	text-decoration: none;
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

.btn::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #D20B08;
	transition: all 0.4s ease; /* 0.4秒かけて滑らかに変化させる */
}

.btn_text::after {
  content: '→';
  display: inline-block;
	margin-left: 12px;
  transition: transform 0.4s ease; /* 0.4秒かけて滑らかに変化させる */
}


/* ホバー時 */
.btn:hover::after {
	width: 100%;
}

.btn:hover .btn_text::after {
	transform:translateX(6px); /* 右へ6px移動 */
}

②丸型ボタンの拡大

ホバーすると、丸型のボタンが拡大し、同時に矢印が右へ移動するアニメーションです。
scale()とtranslateX()を組み合わせることで、ボタン全体が広がりながら、矢印も動く表現にしています。

【使用しているCSS】
transition: all 0.4s ease; 変化を滑らかにする
transform: translateX(6px); 矢印を右へ移動
transform: scale(1.1) ボタンを拡大

See the Pen btn02 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<div class="item">
    <span>丸形ボタンの拡大</span>
    <a class="btn">
        <span class="btn_text">view more</span>
        <span class="arrow">→</span>
    </a>
</div>

CSS

.btn {
	position: relative;
	max-width: 120px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 2px 10px rgb(153, 153, 153);
	text-decoration: none;
	background-color: #D20B08;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

.btn .arrow{
	font-size: 24px;
	font-weight: normal;
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.btn:hover {
	opacity: 0.6;
	transform: scale(1.1);
}

.btn:hover .arrow {
	transform:translateX(6px); /* 右へ6px移動 */
}

③背景色が左から右へ変化する

ホバーすると、背景色が左から右へ変化します。
背景色を疑似要素::beforeとして設定し、transform: scaleX()を使って横方向に伸縮させることで表現しています。

【使用しているCSS】
transition: all 0.4s ease; 変化を滑らかにする
transform: scaleX(0); 横方向のサイズを0にして、背景色を隠す
transform: scaleX(1); 横方向のサイズを元の幅に戻して、背景色を表示
transform: translateX(6px); 矢印を右へ移動
transform: rotate(45deg); 45度回転
(rotate()を指定して45度回転することで矢印"＞"を再現しています)

See the Pen btn03 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<div class="item">
  <span>背景色が左から右へ変化する</span>
    <a class="btn">
        <span class="btn_text">view more</span>
    </a>
</div>

CSS

.btn {
	position: relative;
	max-width: 120px;
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 6px;
	cursor: pointer;
	color: #D20B08;
	background-color: #ffffff;
	border: 2px solid #D20B08;
	overflow: hidden;
	text-decoration: none;
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
	height: 110%;
	background-color: #D20B08;
	transform: scaleX(0); /* 横幅を0にして縮小 */
	transform-origin: left;
	transition: transform 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
	z-index: 0;
}

.btn_text {
	position: relative;
	z-index: 1;
}

.btn_text::after {
  content: '';
  display: inline-block;
	margin-left: 6px;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);  /* 45度回転させて「＞」にする */
  transition: transform 0.3s ease-out;
}

/* ホバー時 */
.btn:hover {
	color: #ffffff;
}

.btn:hover::before {
	transform: scaleX(1);	/* 横幅を1にしてすべて表示 */
}

.btn:hover .btn_text::after {
	transform:translateX(6px) rotate(45deg); /* translateX(6px)を追加して矢印を右へ移動 */
}

④背景グラデーションの変化

ホバーすると、背景色のグラデーションが変化するアニメーションです。
色の変化と矢印の動きを組み合わせることで、ボタンにリッチな印象を与えることができます。

【使用しているCSS】
transition: all 0.4s ease; 変化を滑らかにする
transform: translateX(6px); 矢印を右へ移動
background: linear-gradient(75deg, #D20B08 0%, #fdff71 35%, #fcff2e 60%, #D20B08 100%); グラデーションの色と角度の調整
background-size: 300% 100%; グラデーションのサイズを調整
background-position: 100% 0; グラデーションの表示位置を調整
overflow: hidden; はみ出た部分を非表示

See the Pen btn04 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<div class="item">      
    <span>グラデーションの変化</span>
    <a class="btn">
        <span class="btn_text">view more</span>
        <span class="arrow">→</span>
    </a>
</div>

CSS

.btn {
	position: relative;
	max-width: 120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 42px;
	/* グラデーションの色調整 */
	background: linear-gradient(75deg, #D20B08 0%, #fdff71 35%,  #fcff2e 60%, #D20B08 100%);
	background-size: 300% 100%;
	/* グラデーションの表示位置調整 */
	background-position: 100% 0;
	border-radius: 50px;
	overflow: hidden;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0 2px 10px rgb(153, 153, 153);
	text-decoration: none;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

.btn .btn_text{
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

.btn .arrow{
	font-size: 24px;
	font-weight: normal;
	transition: all 0.4s ease; 	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.btn:hover {
	/* グラデーションの表示位置を調整 */
	background-position: 0% 0;
}

.btn:hover .btn_text{
	transform:translateX(6px); /* 右へ6px移動 */
}

.btn:hover .arrow {
	transform:translateX(6px); /* 右へ6px移動 */
}

2-2. カードのアニメーション

①枠線と影による立体感

ホバーすると、カードの枠線と影が表示されるアニメーションです。
borderとbox-shadowの変化を組み合わせることで、カードが手前に浮き出たような立体的な印象を与えることができます。

【使用しているCSS】
transition: all 0.4s ease; 変化を滑らかにする
transform: translateX(6px); 矢印を右へ移動

See the Pen card01 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<p>枠線と影による立体感</p>
<div class="card_container">
    <a class="card">
        <div>
            <h4 class="card_head">見出し</h4>
            <p class="card_body">テキストテキストテキストテキストテキスト</p>
        </div>
        <div class="view-more">
            <span class="view-more__text">view more</span>
            <span class="view-more__arrow">→</span>
        </div>
    </a>

    <a class="card">
        <div>
            <h4 class="card_head">見出し</h4>
            <p class="card_body">テキストテキストテキストテキストテキスト</p>
        </div>
        <div class="view-more">
            <span class="view-more__text">view more</span>
            <span class="view-more__arrow">→</span>
        </div>
    </a>
    
</div>

CSS

.card {
	background: #ffffff;
	padding: 24px;
	border-radius: 12px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	border: 2px solid #e2e8f0;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.view-more{
	display: inline-block;
	color: #D20B08;
    font-weight: bold;
	text-align: right;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.card:hover {
	border-color: #D20B08;
	box-shadow: 0 2px 10px rgb(153, 153, 153);	/* ホバー時に影をつける */
}

.card:hover .view-more {
    transform: translateX(6px);	/* 右へ6px移動 */
}

/* その他のスタイル */
.card_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 16px;
}

.card_head{
	font-size: 20px;
	margin-bottom: 6px;
}

.card_body{
	font-size: 12px;
	color: #adadad;
}

②下線が右から左へ伸び、上方向にカードが浮き上がる

ホバーすると、下線が伸び、さらにカードも上方向へ移動するアニメーションです。
上へ移動させることで、カードが浮いたような印象を与えることができ、線や影の変化と文字の移動を組み合わせることで、クリックを促します。

【使用しているCSS】
transition: all 0.4s ease; 変化を滑らかにする
transform: translateY(-8px); カードを上へ移動
transform: translateX(6px); 矢印を右へ移動

See the Pen card02 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<p>下線と上方向の浮き上がり</p>
<div class="card_container">
    <a class="card">
        <div>
            <h4 class="card_head">見出し</h4>
            <p class="card_body">テキストテキストテキスト</p>
        </div>
        <div class="view-more">
            <span class="view-more__text">view more</span>
            <span class="view-more__arrow">→</span>
        </div>
    </a>

    <a class="card">
        <div>
            <h4 class="card_head">見出し</h4>
            <p class="card_body">テキストテキストテキスト</p>
        </div>
        <div class="view-more">
            <span class="view-more__text">view more</span>
            <span class="view-more__arrow">→</span>
        </div>
    </a>
    
    <a class="card">
        <div>
            <h4 class="card_head">見出し</h4>
            <p class="card_body">テキストテキストテキスト</p>
        </div>
        <div class="view-more">
            <span class="view-more__text">view more</span>
            <span class="view-more__arrow">→</span>
        </div>
    </a>
</div>

CSS

.card {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	padding: 24px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 1px 10px rgba(153, 153, 153, 0.5);
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: #D20B08;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.view-more{
	display: inline-block;
	color: #D20B08;
    font-weight: bold;
	text-align: right;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.card:hover {
	box-shadow: 0 2px 10px rgb(153, 153, 153);	/* 影を濃くする */
	transform: translateY(-8px); /* 上へ8px移動 */
}

.card:hover::after {
	width: 100%; /* 下線を0→100％へ変化させ表示 */
}

.card:hover .view-more {
    transform: translateX(6px);	/* 右へ6px移動 */
}

/* その他のスタイル */
.card_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 16px;
}

.card_head{
	font-size: 20px;
	margin-bottom: 6px;
}

.card_body{
	font-size: 12px;
	color: #adadad;
}

③画像がモノトーンからカラーに変化する

ホバーすると、モノトーンからカラーに変化し、同時に画像が少し拡大するアニメーションです。
filterを使って画像の色味を変化させ、scale()で画像を親要素内で拡大しています。
画像ギャラリーや記事一覧などに使いやすい表現です。

【使用しているCSS】
transition: all 0.4s ease; 変化を滑らかにする
transform: scale(1.1); 画像を拡大
filter: grayscale(0%); モノトーンからカラーへ変化
(grayscale 100%：完全なモノクロ、0%：元のカラー)

See the Pen card03 by y-maeda (@Maeda-Yoshie) on CodePen.

サンプルコードはこちら

HTML

<p class="label">モノトーンギャラリー</p>
<div class="gallery">
    <a class="gallery-item">
        <img src="https://lh3.googleusercontent.com/d/1_QUDgFv8a3Lund9zRgj233amum3yLMW6" alt="sea">
        <div class="gallery-box">
            <span class="gallery-text">view more</span>
        </div>
    </a>

    <a class="gallery-item">
        <img src="https://lh3.googleusercontent.com/d/1UzvY8iYshkvJx8zcXk_O0fiwoY5zhNb8" alt="mountain">
        <div class="gallery-box">
            <span class="gallery-text">view more</span>
        </div>
    </a>

    <a class="gallery-item">
        <img src="https://lh3.googleusercontent.com/d/1IHiGU8T1DmDV3TAHTWu57X0rSpcnTxyA" alt="forest">
        <div class="gallery-box">
            <span class="gallery-text">view more</span>
        </div>
    </a>
</div>

CSS

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 16px;
}

.gallery-item {
	flex: 1;
	position: relative;
	height: 160px;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%); /* 白黒にする */
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.gallery-item .gallery-box {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

.gallery-text {
	color: #D20B08;
	font-size: 0.85rem;
	font-weight: 700;
	border: 2px solid #D20B08;
	padding: 6px 16px;
	border-radius: 6px;
	transition: all 0.4s ease;	/* 0.4秒かけて滑らかに変化させる */
}

/* ホバー時 */
.gallery-item:hover img {
	filter: grayscale(0%); /* 色を標準に戻す */
	transform: scale(1.1);
}

.gallery-item:hover .gallery-box {
	background: transparent;
}

.gallery-item:hover .gallery-text {
	background-color: #ffffff;
	border-color: #ffffff;
}

まとめ

今回は、transitionやtransformなどのCSSプロパティを組み合わせて、ボタンやカードに動きを加える方法を紹介しました。

「transitionやtransformを知っていたけど、あまり使ってなかった」という方も、意識して取り入れることで、UI表現の幅がグッと広がると思います。

今回紹介したアニメーションをそのまま使うだけでなく、色や移動量、アニメーションの速度などを変えて、サイトやアプリの雰囲気に合った表現にもぜひ挑戦してみてください。

最後まで読んでいただき、ありがとうございました！