おすすめ・比較
Webページの外観は、適用するCSSによって幅広い変化をもたらします。特に視覚的に動きを加えるCSSアニメーションは、静的なページをよりおしゃれで見栄えの良いサイトへ変えてくれる優れものです。
そこでこの記事では、CSSアニメーションの基本から応用までを幅広く紹介し、実際に使えるサンプルについて解説していきます。初心者の方でも参考にできる記事となっていますので、ぜひ参考にしてみてください。
IT関連の会社でWebコーダー、某携帯キャリアでネット回線や携帯販売を行っていました。現在はライターを中心に、仕事で得た知識を活かして幅広く活動中。音声や動画の制作など、もの造りが好きです。
CSSアニメーションとは
CSSアニメーションとは、WebページのHTML要素に動きや変化を加えるためのCSSの機能です。Webページに動的な要素を加えれば、ユーザーの注目を集めたり、サイトのインタラクティビティ向上を見込めます。
CSSアニメーションはJavaScriptなどのスクリプト言語を使用せずに、CSSのみで要素を動かせるため、Webデザインにおいて重要な役割を果たしています。
基本的な概念には、状態の変化に応じて要素のスタイルを時間経過とともに変化させる「transition」や、より複雑なアニメーションを実現するための「@keyframes」と「animation」プロパティなどが含まれます。様々なプロパティの活用で、フェードイン、スライド、回転、色の変化などの華やかなアニメーション効果を実現可能です。
CSSアニメーションの作り方
CSSアニメーションを作成する過程は、CSSの基本的な構造の理解から始まり、キーフレームの定義、そしてアニメーションの適用方法の習得に至ります。
ここでは、CSSアニメーションを作成するための基本的なステップについて説明し、実際の例を通じてその適用方法を紹介していきます。
基本構造と記述方法
CSSアニメーションの基本構造は、アニメーションを定義するための@keyframesルールとそのアニメーションをHTML要素に適用するためのanimationプロパティから成り立っています。
@keyframesルールでは、アニメーションの開始から終了までの各段階でのスタイルを定義します。
例えば、ある要素を透明から不透明に変化させるアニメーションを作成する場合、以下のように@keyframesルールを記述します。
from { opacity: 0; }
to { opacity: 1; }
}
fadeInという名前のアニメーションを定義し、fromキーワードでアニメーションの開始状態（透明度0）、toキーワードで終了状態（透明度1）を指定しています。
アニメーションの各段階でスタイルを定義すると、複雑なアニメーション効果を作成可能です。
キーフレームの使用方法
キーフレームは、CSSアニメーションにおいてアニメーションの中間状態を定義するために使用されます。@keyframesルール内で経過を指示し、アニメーションの進行度に応じたスタイルを指定できます。
要素を左から右に移動させるアニメーションを作成する場合、以下のようにキーフレームを定義します。
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
上記の例では、アニメーションの開始時点（0%）で要素が元の位置にあり、終了時点（100%）で要素が水平方向に100ピクセル移動していることを示しています。
キーフレームの使用でアニメーションの途中で要素の位置やサイズ、色などのスタイルを細かく制御でき、動的で魅力的なアニメーションを作成できます。
アニメーションの適用方法
アニメーションをHTML要素に適用するには、animationプロパティを使用します。使用するキーフレームの名前、アニメーションの持続時間、タイミング関数、遅延時間、繰り返し回数など、アニメーションの多様な側面を指定できます。
先ほど定義したslideInアニメーションを適用する例を以下に示します。
animation:slideIn 2s ease-in-out;
}
.elementクラスを持つ要素にslideInアニメーションを適用しています。アニメーションは2秒間持続し、ease-in-outタイミング関数によって開始と終了が滑らかになります。
animationプロパティは定義したアニメーションを要素に適用して、Webページに動的なインタラクションを追加できます。
CSSアニメーションの種類
CSSアニメーションはWebページに動きを加えるための手段の1つで、サイトに多種多様な動的アクションを付与できます。CSSアニメーションは種類が豊富で、それぞれがWebデザインに独自の魅力やブランドイメージをもたらしてくれます。
ここでは、CSSアニメーションの主要な種類について、特徴と実装方法について詳しく説明していきます。
トランジション
トランジションは、transitionプロパティを使用します。アニメーションの開始と終了時間、動き方の指示ができ、1回だけ再生できる簡単なアニメーションの作成が可能です。
transitionには主に4種類のプロパティが存在します。
- transition-delay:時間; ……トランジションが開始されるまでの待ち時間を指定します。
- transition-duration:時間; ……トランジションが開始されてから完了するまでの時間を指定します。
- transition-property:プロパティ名; ……トランジションを適用するプロパティを指定します。
- transition-timing-function:加速曲線; ……指定したプロパティに対し、どのように変化するかを値を指定します。
4つのプロパティはtransitionのみで纏めて指定もできるので、4つの要素を全て使用するのであれば、纏めた方が記述コードはすっきりします。transitionで纏めて記述する際の順番はproperty、duration、delay、timing-functionで記述していきます。
合わせてtransition-timing-functionには多様な値が存在しており、指定した値によって変化が異なるため、どのような変化をするのか確認をしておくと良いでしょう。以下にtransition-timing-functionの種類を紹介します。
| transition-timing-functionの値 | アニメーションの動き |
| ease | 開始と終了の動きを滑らかにします |
| linear | 一定の割合で直線的に変化します |
| ease-in | 開始時の動きを緩やかにします |
| ease-out | 終了時の動きを緩やかにします |
| ease-in-out | 開始と終了の動きを緩やかにします |
| cubic-bezier() | 関数で座標を指定して、三次ベジェ曲線の軌跡を基に変化します |
| step-start | 変化開始時に変化終了後の状態に変化します |
| step-end | 開始時に変化せずに、終了時に変化が完了します |
| steps() | 関数を指定して、トランジションの変化の進行時間と度合を区切りながら変化させます |
キーフレームアニメーション
キーフレームアニメーションは、animationで付けたアニメーション名と指定時間を基に、@keyframes内でアニメーションの時間経過を定義します。keyframesとanimationはセットで使用すると覚えておきましょう。また、キーフレーム内では!importantは使用不可なので注意が必要です。
@keyframesにおけるアニメーション経過点は、以下の通りです。
- ％値 ……アニメーションの経過時間を％で指定します。animationで10秒のアニメーションを定義していれば、50％は5秒の時点を示します。
- from ……アニメーションの開始点、0％を示します。
- to ……アニメーションの終了点、100％を示します。
animationプロパティでは指定できるプロパティが豊富に存在しており、transitionと同様にanimationのみで纏めてプロパティを指定できます。
animationで纏めて記述する際は、name、duretion、timing-function、delay、iteration-count、direction、fill-mode、play-stateの順に記載していきます。
【かっこいい】CSSアニメーションのサンプル一覧
CSSアニメーションは、アイデア次第で幅広いアニメーションを作成できます。フェードイン・フェードアウトからスライド、拡大・縮小、回転、色の変化、テキストアニメーションなど、指定できる要素も様々です。
ここでは、CSSアニメーションでWebサイトをかっこよく魅せるサンプルを紹介しています。
3Dフリップカード
カード上のオブジェクトを立体的にマウスホバーでフリップのように回転させます。
表面と裏面をHTMLで作成し、CSSで立体的に仕上げます。キーフレームを使用せずともtransform-styleにpreserve-3dを設定すれば、比較的簡単に3Dの表現が可能です。backface-visibilityを定義すると、カードが裏返った際に表面を表示しないようにできます。
HTML
<h2 class=”card-face front”>Front</h2>
<h2 class=”card-face back”>Back</h2>
</div>
CSS
.card {
width: 300px;
height: 200px;
transform-style: preserve-3d;
transition: transform 0.6s;
cursor: pointer;
}
.card:hover {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 10px;
}
.front {
background-color: #3a86ff;
}
.back {
background-color: #ff7f50;
transform: rotateY(180deg);
}
パルスエフェクト
円形のオブジェクトが徐々に大きくなるようなアニメーションです。
elementクラスで指定された円形に対し@keyframes pulseAnimationで透明度をコントロールし、円形がパルス状になるように調整します。また、animationでアニメーションの速度を調整できます。box-shadowを設定しておくと、より立体的に表現可能です。
CSS
.element {
width: 100px;
height: 100px;
background-color: #ff3f34;
border-radius: 50%;
position: relative;
box-shadow: 0 0 15px rgba(255, 63, 52, 0.5);
animation: pulseAnimation 1.5s infinite;
}
@keyframes pulseAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.4);
opacity: 0.6;
}
100% {
transform: scale(1.7);
opacity: 0;
}
}
シェイクアニメーション
オブジェクトやテキストを振動しているように見せるアニメーションです。
elementにhover設定し、マウスホバーでelementクラスをシェイクします。@keyframesで細かく度合を設定し、左右に揺れ動く滑らかなシェイクアニメーションを表示します。
CSS
.element {
height: 30pt;
background-color: #00b4d8;
cursor: pointer;
}
/* Hoverでシェイクアニメーションをトリガー */
.element:hover {
animation: shakeAnimation 0.6s ease-in-out;
}
/* シェイクアニメーション */
@keyframes shakeAnimation {
0% { transform: translate(0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0); }
20%, 40%, 60%, 80% { transform: translate(10px, 0); }
100% { transform: translate(0, 0); }
}
グラデーションアニメーション
elementのテキストや特定の要素に動くグラデーションをかけます。サンプルではテキストにグラデーションを設定していますが、空白にして要素の大きさを指定すれば、グラデーションボックスも作成可能です。
background: linear-gradientで複数の色を指定し、グラデーションを適用しています。加えて@keyframesにはグラデーションの位置を変化させ、色が滑らかに変わる表現を施しています。
CSS
.element {
font-size: 4rem; /* テキストのサイズ */
background: linear-gradient(45deg, #FF5733, #FFC300, #DAF7A6, #33FF57, #337BFF); /* グラデーション */
background-size: 400%; /* グラデーションのサイズを拡大 */
-webkit-background-clip: text; /* テキストにグラデーションを適用 */
-webkit-text-fill-color: transparent; /* テキストの色を透明に */
animation: gradientAnimation 5s ease infinite; /* アニメーションを適用 */
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
タイピングエフェクト
テキストがタイプされているように見せるアニメーションを実装します。steps関数を使用してテキストが一文字ずつ表示されるように見せています。forwardsはアニメーション終了後もテキストを表示状態に保持します。
CSS
overflow: hidden;
white-space: nowrap;
border-right: 3px solid black; /* カーソルのように見せる */
width: 0;
animation: typing 5s steps(40, end) forwards;
}
from { width: 0; }
to { width: 100%; }
}
【すごい】CSSアニメーションのサンプル一覧
コード記述は多少難しくなりますが、CSSでJavaScriptのような複雑なアニメーションも表現可能です。この項目では、CSSで表現できるワングレード上のアニメーションを紹介していきます。
3D立体キューブ回転
CSSで立方体を形成し、回転させるアニメーションです。
まずはHTMLでキューブの骨組みを作成してきます。cubeクラスでキューブのサイズを定義し、3Dスタイルを指定してアニメーションを動かします。faceクラスには各面にスタイルと色を設定し、transformでそれぞれの面が四角になるように調整、並びに配置していきます。
@keyframesにtransformを用いてキューブを回転させるためのアニメーションを作成すれば、回転する3D立体キューブの完成です。色は好みに合わせてbackground-colorで変更ができます。
HTML
<div class=”face front”>Front</div>
<div class=”face back”>Back</div>
<div class=”face left”>Left</div>
<div class=”face right”>Right</div>
<div class=”face top”>Top</div>
<div class=”face bottom”>Bottom</div>
</div>
CSS
.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(45deg);
animation: rotateCube 6s infinite linear;
}
.face {
position: absolute;
width: 100px;
height: 100px;
background-color:rgb(255 0 90 / 25%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.front { transform: rotateY(0deg) translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotateCube {
from {
transform: rotateX(30deg) rotateY(45deg);
}
to {
transform: rotateX(390deg) rotateY(405deg);
}
}
パーティクルアニメーション
円形を複数用いて不規則に動かすアニメーションです。
HTMLでparticle-containerクラスにparticle要素を複数配置します。CSSではparticleクラスにパーティクルのスタイルを記述しましょう。@keyframesではparticleクラスが上昇しながら縮小するアニメーションを定義し、パーティクルアニメーションを表現します。
nth-childを活用して各パーティクルの位置やアニメーションの時間をずらせば、パーティクルアニメーションの完成です。
HTML
<div class=”particle”></div>
<div class=”particle”></div>
<div class=”particle”></div>
<div class=”particle”></div>
<div class=”particle”></div>
</div>
CSS
.particle-container {
position: relative;
width: 100vw;
height: 100vh;
}
.particle {
position: absolute;
border-radius: 50%; /* パーティクルの形 */
background-color: #FF5733; /* パーティクルの色 */
opacity: 0.8;
animation: rise 1s infinite; /* アニメーション */
}
@keyframes rise {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-50px) scale(1);
}
100% {
transform: translateY(-100px) scale(0);
}
}
/* パーティクルの異なる位置を設定 */
.particle:nth-child(1) {
width: 10px;
height: 10px;
left: 20%;
animation-delay: 0s;
}
.particle:nth-child(2) {
width: 15px;
height: 15px;
left: 50%;
animation-delay: 0.2s;
}
.particle:nth-child(3) {
width: 12px;
height: 12px;
left: 70%;
animation-delay: 0.4s;
}
.particle:nth-child(4) {
width: 8px;
height: 8px;
left: 30%;
animation-delay: 0.6s;
}
.particle:nth-child(5) {
width: 20px;
height: 20px;
left: 80%;
animation-delay: 0.8s;
}
モーフィングSVGアニメーション
HTML上でSVGを定義して表現する方法です。オブジェクトの形が徐々に変化する特徴を持ちます。
SVG内に1つのパス要素を作成し、アニメーションの対象を設定します。
@keyframesでd:pathパスを使ってSVGのモーフィングの形を指定し、@keyframesでパーセンテージを3段階に分ければ、ゆっくりとモーフィングするアニメーションが作成可能です。
HTML
<svg viewBox=”0 0 100 100″ width=”200″ height=”200″>
<path id=”element” d=”M10 30 Q 40 5, 70 30 T 90 70 Q 60 95, 30 70 T 10 30″ fill=”#72d6d6″/>
</svg>
CSS
.element-container {
width: 200px;
height: 200px;
}
#element {
animation: element 5s infinite alternate ease-in-out;
}
@keyframes element {
0% {
d: path(“M10 30 Q 40 5, 70 30 T 90 70 Q 60 95, 30 70 T 10 30”);
}
50% {
d: path(“M20 20 Q 50 10, 80 20 T 80 80 Q 50 90, 20 80 T 20 20”);
}
100% {
d: path(“M10 30 Q 40 5, 70 30 T 90 70 Q 60 95, 30 70 T 10 30”);
}
}
視差効果スクロールアニメーション
パララックスアニメーションとも呼ばれています。スクロールすると画面上で指定したクラスをゆっくりと動かします。
各セクションとスクロールスペースをHTMLで記述します。contentクラスにtransitionを活用し、テキストがスクロール時に動くアニメーションを追加しましょう。hoverでマウスホバーを設定しておけば、画面をスクロールした際にゆっくりとテキストが上に動く視差効果スクロールアニメーションを実現可能です。
HTML
<div class=”parallax-container”>
<div class=”content”>
<h2>セクション1</h2>
<p>スクロールに合わせて動くテキスト</p>
</div>
</div>
<div class=”spacer”></div> <!– スペーサー –>
<div class=”parallax-container”>
<div class=”content”>
<h2>セクション2</h2>
<p>テキスト2</p>
</div>
</div>
<div class=”spacer”></div> <!– スペーサー –>
<div class=”parallax-container”>
<div class=”content”>
<h2>セクション3</h2>
<p>テキスト3</p>
</div>
</div>
CSS
.parallax-container {
position: relative;
height: 100vh;
overflow: hidden;
background-color: #f0f0f0; /* セクションの背景色 */
}
.content {
position: absolute;
width: 100%;
text-align: center;
top: 50%; /* 中央に配置 */
transform: translateY(-50%);
color: #333; /* テキストの色 */
transition: transform 1.5s ease;
}
.parallax-container:hover .content {
transform: translateY(-80%); /* ホバー時に大きく上に動く */
}
/* スペーサー */
.spacer {
height: 100vh; /* セクション間のスペースを作成 */
}
テキストグリッチエフェクト
テキストに歪があるような表現を施します。
HTMLでテキストにdata-textを定義し、CSSで記述するbeforeとafterに指定のテキストを読み込ませます。beforeとafterのそれぞれに違う色のanimationを指定し、z-indexで階層を分けておきましょう。@keyframesで動きを細かく指定し、細かく左右に揺れる表現を入れると、CSSだけでテキストグリッチを表現できます。
HTML
CSS
.glitch {
position: relative;
font-size: 5rem;
font-weight: bold;
color: #E8FF00;
}
.glitch:before,
.glitch:after {
display: block;
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
.glitch:before {
animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
color: #4800FF;
z-index: -1;
}
.glitch:after {
animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
color: #FFBCBC;
z-index: -2;
}
@keyframes glitch-it {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
to {
transform: translate(0);
}
}
【背景に使える】CSSアニメーションのサンプル一覧
ポイント的に使えるオブジェクト以外にも、CSSアニメーションで色とりどりな背景を豊富に作成可能です。
ここでは、背景に適用できるCSSアニメーションのサンプルを紹介していきます。
グラデーションアニメーション
imgなどの画像を使わずに、背景をCSSでグラデーションするアニメーションです。
background: linear-gradientで複数の色を指定し、全体の背景をグラデーションにします。animationで10秒ごとに背景の位置を移動させるアニメーションを加えると、グラデーション背景が作成可能です。@keyframesの変化位置を0%から100%で段階的に区切ると滑らかに動きます。
CSS
.element {
width: 100%;
height: 100vh;
background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15);
background-size: 800% 800%;
animation: gradientAnimation 10s ease infinite;
}
/* グラデーションアニメーション */
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
幾何学パターンのアニメーション
CSSを用いて規則的な模様を産み出すアニメーションです。
elementクラスをグリッド上にし、beforeとafterを追加します。beforeとafterにはbackground:radial-gradientで円を配置し、@keyframesにはtransformで回転を指示しましょう。afterのみanimationで反対に回る指示を加えると、規則的に回転する幾何学パターンのアニメーション背景を作成可能です。
CSS
body {
height: 100vh;
background-color: #333;
}
.element {
display: grid;
opacity: 0.2;
}
.element::before,
.element::after {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, #fbdb94 20%, rgba(255, 255, 255, 0) 20%) 0 0,
radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 20%) 50px 50px;
background-size: 30px 100px;
opacity: 0.1;
animation: rotate-pattern 15s linear infinite;
}
.element::after {
animation-direction: reverse;
}
@keyframes rotate-pattern {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
パーティクル背景
パーティクルアニメーションを背景に用いた例です。記載例はCSSのみで表現していますが、SCSSで＠forを用いてdivを複数生成できるように設定すれば、粒子数の増加も容易です。
HTML上で複数のelementを作成し、それぞれのパーティクルが異なる位置、サイズ、アニメーション速度で動くようにnth-childで細かく記述していきます。@keyframesで透明度を設定し、パーティクルの動きをtransformで段階ごとに指定していくと、パーティクル背景をCSSのみで表現可能です。
粒子を増やしたい場合は、HTMLとnth-childでelementを追加すると良いでしょう。
HTML
<!– パーティクルの数に応じてdivを追加 –>
<div class=”element”></div>
<div class=”element”></div>
<div class=”element”></div>
<div class=”element”></div>
<div class=”element”></div>
<!– 必要な数だけelementを複製 –>
</div>
CSS
body {
width: 100%;
height: 100%;
background-color: #1b1b1b;
}
.particle {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.element {
position: absolute;
width: 6px;
height: 6px;
background-color:#fffacd;
border-radius: 50%;
opacity: 0.6;
animation: float 5s infinite ease-in-out;
}
/* パーティクルのランダムな配置とサイズ変更 */
.element:nth-child(1) { top: 20%; left: 30%; animation-duration: 3s; width: 10px; height: 10px; }
.element:nth-child(2) { top: 50%; left: 60%; animation-duration: 6s; width: 20px; height: 20px; }
.element:nth-child(3) { top: 80%; left: 20%; animation-duration: 4s; width: 30px; height: 30px; }
.element:nth-child(4) { top: 30%; left: 80%; animation-duration: 7s; width: 20px; height: 20px; }
.element:nth-child(5) { top: 70%; left: 40%; animation-duration: 5s; width: 40px; height: 40px; }
/* パーティクルのアニメーション */
@keyframes float {
0% { transform: translate(0, 0); opacity: 0.6; }
50% { transform: translate(50px, -50px); opacity: 0.2; }
100% { transform: translate(0, 0); opacity: 0.6; }
}
波紋エフェクト
背景に波紋が広がるエフェクトを表現します。
HTMLで波紋の骨組みを制作し、CSSで形を整えます。@keyframesには要素の拡大、縮小のアニメーションを指定し、elementクラスごとにアニメーションの速度を遅延させると、波紋エフェクト背景になります。widthとheightで数値を変更すると、好みの大きさに変更が可能です。
HTML
<div class=”element”></div>
<div class=”element”></div>
<div class=”element”></div>
</div>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.element-background {
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* 波紋の配置とサイズ変更 */
.element {
position: absolute;
border-radius: 50%;
width: 80%;
height: 90%;
border: 4px solid rgba(255, 255, 255, 0.7);
animation: ripple-animation 3s infinite;
}
.element:nth-child(2) {
width: 60%;
height: 80%;
animation-delay: 0.5s;
}
.element:nth-child(3) {
width: 45%;
height: 60%;
animation-delay: 1s;
}
@keyframes element-animation {
0% {
transform: scale(0.7);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
スライディング背景
背景が横からスライディングアニメーションで挿入されます。
スライディング背景はCSSだけで比較的簡単に導入可能です。elementクラスにbackgroundで背景色、或いは画像を指定し、@keyframesでスライドアニメーションとスライドの角度を定義します。animationでスライディングの時間を設定すれば、スライディング背景が容易に実現できます。
CSS
.element {
width: 200%;
height: 100%;
background-color: #000;
animation: slideIn 3s ease-in-out forwards;
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
【文字に使える】CSSアニメーションのサンプル一覧
CSSは背景、オブジェクトをアニメーション化するのはもちろん、テキストにも応用が可能です。
この項目では、テキストに活用できる動きのあるCSSアニメーションのサンプルを紹介していきます。
フェードイン
@keyframesを使用して要素が3秒間で完全に不透明になり、その後再び透明に戻るアニメーションを作成します。infiniteキーワードにより、フェードインとフェードアウトのアニメーションを無限に繰り返しができます。
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}.element {
animation: fadeInOut 3s infinite;
}
波打つテキスト
@keyframesとanimationを組み合わせれば、テキストが波打つような動きを表現可能です。
HTMLではテキストを1文字ずつspanで分けておきましょう。@keyframesには50％の部分で動くpxを指定し、0、100％で元の位置に戻るようにtransformを指定します。pxの数値を変えると、テキストの動きも変化します。
spanごとに遅延させるanimationを記述するだけで、容易に波打つテキストを実現できます。
HTML
<span>テ</span>
<span>キ</span>
<span>ス</span>
<span>ト</span>
</div>
CSS
.text {
font-size: 5rem;
}
.text span {
display: inline-block;
animation: bounce 0.6s ease infinite;
}
.text span:nth-child(1) { animation-delay: 0s; }
.text span:nth-child(2) { animation-delay: 0.1s; }
.text span:nth-child(3) { animation-delay: 0.2s; }
.text span:nth-child(4) { animation-delay: 0.3s; }
/* 必要に応じて文字数分追加 */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
3D回転
@keyframesを用いて、elementクラスの要素の中心軸を基準に回転させられます。animationでinfiniteを用いれば要素が無限に回転する3D回転アニメーションを作成できます。
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}.element {
animation: rotate 2s linear infinite;
}
CSSアニメーションのメリット
CSSアニメーションはHTMLと組み合わせてWebページのデザイン性を上昇させる以外に、様々なメリットが存在します。ここでは、CSSアニメーションの利点を具体的に解説していきます。
パフォーマンスの向上
CSSアニメーションはブラウザによるハードウェアアクセラレーションの恩恵を受けることが多く、JavaScriptのアニメーションと比較してパフォーマンスが向上する場合があります。CSS自体の読み込みが軽く、動作負荷が少ないためです。
デスクトップパソコンやモバイルを問わず、ブラウザ上で容易に動作できるので、Webサイトの読み込みを簡単に軽量化できる点は大きなメリットでしょう。
実装がシンプル
CSSアニメーションの最大のメリットは、JavaScriptを使用せずに複雑なアニメーションを実装できる点です。そのため学習コストが低く、Web開発の初心者でも比較的簡単にアニメーションを追加することができます。
CSS自体の歴史も長いので、必要な情報は書籍や検索ですぐに入手できます。JavaScriptのような難しい関数を記述せずとも、CSSのプロパティさえ理解していればWebサイト上にすぐにアニメーションを実装できます。
柔軟性と制御性が高い
CSSアニメーションはプロパティ次第で変更が容易なため、柔軟性が高い利点があります。GIFなどを使用したアニメーションは制作後に形や色の変更が難しいですが、CSSはその限りではありません。複雑なアニメーションでもスタイルシートで細かくしていをすれば、制御が容易です。
また、Googleブラウザのデベロッパーツールを活用すれば、スタイルシートを直接開かずともWebサイト上でCSSの動き検証できるので、開発者は検証をしながら柔軟な対応ができます。
レスポンシブデザインとの相性が良い
CSSアニメーションはレスポンシブデザインにも対応しており、多様なデバイスや画面サイズで一貫したアニメーションを提供することができます。そのためモバイルとデスクトップでデザインを大きく分ける必要がなく、コストに優れています。
アニメーション以外にも画像や文字、背景とCSSでデザインできるものであれば、軽量なレスポンシブを適用可能です。
バッテリー消費の最適化ができる
CSSアニメーションは軽量なため、バッテリーの消耗を抑えられる可能性があります。JavaScriptなどを使用したアニメーションや画像を使用したアニメーションは読み込みに時間が発生しますが、CSSアニメーションはブラウザ上ですぐに起動するので、モバイル端末への負荷掛からない傾向にあります。
結果として、多言語で複雑なアニメーションを作成するよりも、CSSで作成されたアニメーションの方がバッテリー消費の最適化が期待できます。
CSSアニメーションの応用
CSSアニメーション技術の応用で、Webサイトやオンライン広告でユーザーにより強い印象を与え、エンゲージメントの上昇も可能です。ここでは、CSSアニメーションをWebサイトや広告に適用する際の具体的な例とその効果について解説していきます。
Webサイトへの適用例
WebサイトにCSSアニメーションを適用すれば、訪問者の注意を惹きつけ、サイトの使いやすさを向上させられます。
例えば、ナビゲーションメニューにスライドインアニメーションの適用で、ユーザーがメニュー項目を選択する際の操作を滑らかで使いやすいものに変えられます。また、スクロールに応じてコンテンツがフェードインするアニメーションは、ユーザーがページを下に移動するにつれて新しい情報を目にできる楽しさを提供してくれます。
さらに、ボタンやリンクにホバーエフェクトを加えれば、より動的なアクションが可能になり、ユーザーエンゲージメントを高められます。ユーザーがボタンにカーソルを合わせるとボタンが拡大し、色が変わるなどのアニメーション設定が良い例です。
広告やバナーでの活用
CSSアニメーションは、オンライン広告やバナーにおいても効果を発揮します。アニメーションの使用で、広告の視認性を高めてユーザーの注意の惹きつけが可能です。動的な要素は静的な広告より、クリックスルーレートの向上に役立ちます。
プロモーション広告において特定の商品やオファーを強調するために、アイテムが画面内に回転しながら現れるアニメーションの設定ができます。また、期間限定のセールやイベントを告知するバナーにおいてカウントダウンアニメーションを使用すれば、緊急性を高め、ユーザーの行動を促せます。
CSSアニメーションの活用は、広告コンテンツをより魅力的で効果的に仕上げられます。
まとめ：CSSアニメーションで動きをつけてみましょう
CSSアニメーションは、Webページに動きを加える効果的な手段です。フェードイン・アウト、スライド、拡大・縮小、回転、色変化、テキストアニメーションなど、様々なアニメーションの種類と作り方が存在します。アイデア次第で、幅広い活用が可能です。
CSSアニメーションは、内容によってはJavascriptなどの言語を用いることなく簡単に実装できるメリットがあります。また、処理が軽くなるような実装も可能なため、見た目だけでなく性能面にも利点があります。
CSSアニメーションやプログラム言語などのシステム開発についてお悩みの方は、株式会社Jiteraに一度ご相談してみてはいかがでしょうか。多様なジャンルに精通したエンジニアが、魅力的なアニメーション作成をお手伝いします。
