知識を取り込み、そして発信する
アニメーションとは、要素の見た目や位置、サイズなどの変化を滑らかに表現する仕組みです。
変化に動きを加えることで、ユーザーにとって分かりやすく、自然な操作感のある画面を作ることができます。
例えば、ボタンにマウスを乗せたときの変化や、要素の表示・非表示の切り替えなどに活用されます。
ここでは、CSSを使ったアニメーションの基本的な考え方と使い方について解説していきます。
アニメーションではさまざまなプロパティを変化させることができますが、その中でも特に重要なのがopacityです。
構文
セレクタ{
opacity: 値;
}
opacityは要素の透明度を指定するプロパティです。
0で完全に透明、1で完全に不透明になり、その間の値で徐々に表示させることができます。
この性質を利用することで、フェードインやフェードアウトなどのアニメーションを実装することができます。
コード例
<div>
<p id="bgOpacity">色が透けます</p>
</div>#bgOpacity{
background-color: #ff0000;
opacity: 0.5;
}出力例
色が透けます
opacityを0.5に設定したため、色が薄くなりました。
ただし、p要素全体に透明度0.5が適用されるためテキストも薄くなります。
これは、opacityを設定した要素だけでなく、その中に含まれる子要素にも透明度が適用されるためです。
背景色のみを透過させたい場合どうすればいいでしょうか。
次のコード例を見てみましょう。
<div>
<p id="bgOpacity">色が透けます</p>
</div>#bgOpacity{
background-color: rgba(255, 0, 0, 0.5);
}出力例
色が透けます
このように、背景や一部の要素だけを透過させたい場合は、opacityではなくrgbaを使用します。
opacityは要素全体に適用されるため、子要素を含めてまとめて透明になり、個別に透明度を調整することはできません。
そのため一見すると使いづらいように感じますが、要素全体をまとめて変化させることができるため、アニメーションでは欠かせないプロパティとなります。
要素の見た目は、通常は瞬時に切り替わりますが、アニメーションを適用することで、その変化を滑らかに表現することができます。
例えば、マウスを乗せたときの色やサイズの変化を徐々に行うことで、自然で分かりやすい動きを実現できます。
このように、ある状態から別の状態へ変化する際に動きを加えるのが、状態変化のアニメーションです。
構文
セレクタ{
transition-property: プロパティ名;
transition-duration: 時間;
transition-timing-function: 動き;
transition-delay: 遅延時間;
transition: プロパティ名 時間 動き 遅延時間;
}
transitionは複数のプロパティに分かれており、それぞれ個別に設定することができます。
transition-propertyでは、どのプロパティをアニメーションさせるかを指定します。
背景色や文字の大きさなどプロパティを指定します。
transition-durationでは、変化にかかる時間を指定します。
1sであれば1秒、0.5sであれば0.5秒と秒単位で指定します。
transition-timing-functionでは、変化の進み方を指定します。
変化の進み方には複数の種類があり、それぞれ動きが異なります。
詳しくは一覧表を確認してください。
transition-delayでは、アニメーションが開始されるまでの遅延時間を指定します。
例えば0.5sであれば0.5秒後にアニメーションがスタートします。
transitionはこれらをまとめて記述できるショートハンドプロパティです。
コード例はショートハンドで指定します。
| プロパティ名 | 説明 |
|---|---|
| linear | 一定の速度で変化 |
| ease | ゆっくり始まり→速く→ゆっくり終わる |
| ease-in | ゆっくり始まる |
| ease-out | ゆっくり終わる |
| ease-in-out | ゆっくり始まり、ゆっくり終わる |
| step-start | 開始時点ですぐに変化（カクッと切り替わる） |
| step-end | 終了時点で変化（最後に切り替わる） |
| steps(数値, start | end) | 指定した数値を段階として変化 |
| cubic-bezier(x1, y1, x2, y2) | xは時間、yは変化量を示し、加速や減速のタイミングを細かく制御できる |
transition-timing-functionを指定しないとeaseが初期値となります。
cubic-bezierでを使用する機会は多くありませんが、細かい動きを調整したい場合に利用されます。
コード例
<div>
<p id="changeBgColor">色が変わっていきます</p>
</div>#changeBgColor{
color: #ffffff;
background-color: #0000ff;
transition: 1.5s;
}
#changeBgColor:hover{
background-color: #ff0000;
}出力例
色が変わっていきます
このコードでは、要素の背景色が変化する際にアニメーションを適用しています。
まず、通常時のスタイルでは、テキストの色を白、背景色を青に設定しています。
さらに、transitionを指定することで、スタイルの変化を1.5秒かけて滑らかに行うようにしています。
次に、hover時のスタイルでは、背景色を赤に変更しています。
通常であれば、マウスを乗せた瞬間に色が切り替わりますが、transitionを設定しているため、青から赤へゆっくりと変化します。
このように、状態が変化したときに、その変化を滑らかに表現できるのがtransitionの特徴です。
要素の見た目は、色の変化だけでなく、位置や大きさ、角度なども変えることができます。
例えば、少し横に移動させたり、大きさを変えたり、回転させたりすることで、より動きのある表現が可能になります。
このように、要素そのものの形や位置を変化させることで、動きを表現する方法もあります。
構文
セレクタ{
transform: 関数名(値);
}
transformには、要素を移動・拡大縮小・回転・傾けるための複数の関数が用意されています。
これらを使い分けることで、さまざまな動きを表現することができます。
詳しくは一覧表を確認してください。
| 関数 | 説明 |
|---|---|
| translateX(値) | 横方向に移動 |
| translateY(値) | 縦方向に移動 |
| translate(x, y) | 横・縦に同時に移動 |
| scale(値) | 要素を拡大・縮小 |
| scaleX(値) | 横方向のみ拡大・縮小 |
| scaleY(値) | 縦方向のみ拡大・縮小 |
| rotate(角度) | 要素を回転 |
| skewX(角度) | 横方向に傾ける（斜めにする） |
| skewY(角度) | 縦方向に傾ける（斜めにする） |
指定する値は関数によって単位が異なります。
translateはpxや%などの長さの単位で移動量を指定します。
なお、%は要素自身のサイズが基準になります。
scaleは単位を持たない数値で倍率を指定し、1が元の大きさになります。
%ではなく倍率で指定する点に注意が必要です。
rotateはdegなどの角度の単位を使って回転させます。
このように、関数ごとに指定方法が異なる点に注意してください。
それではtranslate・scale・rotateを使ったコードを見ていきましょう。
コード例
<div>
<p id="translate">①</p>
<p id="scale">②</p>
<p id="rotate">③</p>
</div>div{
height: 250px;
}
div > p{
width: 50px;
height: 50px;
background-color: #ff0000;
color: #ffffff;
text-align: center;
line-height: 50px;
}
#translate:hover {
transform: translate(50px, 50px);
}
#scale:hover {
transform: scale(1.5);
}
#rotate:hover {
transform: rotate(45deg);
}出力例
①
②
③
このコードでは、要素の動きが変化する際にアニメーションを適用しています。
最初の要素にマウスを乗せると右に50px、下に50px移動します。
2番目の要素にマウスを乗せると1.5倍のサイズに変化します。
最後の要素にマウスを乗せると45度回転します。
要素の大きさや配置によっては、変形の結果が分かりにくくなる場合があるため、サイズを指定しておくと動きを確認しやすくなります。
opacityはアニメーション専用のプロパティではありませんが、これまでアニメーションに関するCSSをそれぞれ見てきました。
単体のプロパティでも変化を表現することはできますが、実際のアニメーションでは複数の変化を組み合わせて使用します。
例えば、表示の変化だけでなく、位置や大きさの変化を同時に行うことで、より自然で分かりやすい動きを表現することができます。
それでは早速組み合わせたコード例を見ていきましょう。
コード例
<div>
<p id="anim">要素</p>
</div>div{
height: 100px;
}
#anim{
width: 75px;
height: 50px;
background-color: #ff0000;
color: #ffffff;
text-align: center;
line-height: 50px;
transition: ease-in-out 5s;
}
#anim:hover {
opacity: 0.5;
transform: translateX(75px) scale(1.25) rotate(360deg);
background-color: #0000ff;
}出力例
要素
このコードでは、要素の動きが変化する際に複数の変化を同時に確認することができます。
transform単体で扱った際には触れていませんでしたが、関数を並べて指定することで複数の変形を同時に適用できます。
この場合、1回転しながら75px右に移動しつつ、1.25倍の大きさになります。
また、opacityによって透明度も変化し、background-colorとともに5秒かけて見た目が変化します。
このように複数のプロパティを組み合わせることで、より自然なアニメーションを表現することができます。
ここまで見て、次のように思ったかもしれません。
1.5秒後かけて右に動き、その後さらに1.5秒かけて大きさを変えることはできないのか？
実は、このように動きの順序やタイミングを細かく制御することも可能です。
ただし、transitionだけでは実現できません。
その方法については、次のページで詳しく解説します。