5.1 色の変更
CSSトランジション (transitions)は、要素のプロパティの変更をアニメーション化し、滑らかな視覚効果を作り出すことができるんだ。 今回は、トランジションを使って色やサイズ、位置を変更する方法を見てみよう。それと、実用的な例も示していくね。
CSSトランジションで要素の色を変えるのは、最も一般的な使い方のひとつだね。 これには、テキスト、背景、境界の色の変更が含まれるよ。
例 1: 背景色の変更
この例では、カーソルを合わせたときに要素の背景色が変わるよ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色の変更</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 固定されたサイズと背景色の要素.box:hover: 要素にカーソルを合わせると、背景色が青から緑に1秒でタイミング関数easeで滑らかに変わるよ
例 2: テキストの色の変更
この例では、カーソルを合わせたときに要素のテキスト色が変わるよ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストの色の変更</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Hover over me!</div>
</body>
</html>
コードの説明:
.text: 初期テキスト色の要素.text:hover: 要素にカーソルを合わせると、テキスト色が赤から紫に0.5秒でリニアなタイミング関数で滑らかに変わるよ
5.2 サイズの変更
CSSトランジションを使って要素のサイズを変更する方法には、幅、高さ、もしくは両方のサイズを同時に変更することが含まれるね。
例 1: 幅の変更
この例では、カーソルを合わせたときに要素の幅が変わるよ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幅の変更</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 初期幅100ピクセルの要素-
.box:hover: 要素にカーソルを合わせると、幅が2秒で滑らかに200ピクセルに拡大するよ。ease-in-outのタイミング関数を使っているよ。
例 2: 高さの変更
この例では、カーソルを合わせたときに要素の高さが変わるよ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高さの変更</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
コードの説明:
.box: 初期高さ100ピクセルの要素.box:hover: 要素にカーソルを合わせると、高さが1.5秒で滑らかに200ピクセルに拡大するよ。easeのタイミング関数を使っているよ。
5.3 位置の変更
CSSトランジションを使って要素の位置を変更する方法には、プロパティtop, right, bottom, leftや、トランスフォーメーションtranslateを用いることが含まれるよ。
例 1: leftを使った移動
この例では、カーソルを合わせたときに要素が右に移動するよ。leftプロパティを使っているんだ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>要素の移動</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 初期位置left: 0の要素.box:hover: 要素にカーソルを合わせると、2秒で平滑に100ピクセル右に移動するよ
例 2: transform: translateを使った移動
この例では、カーソルを合わせたときに要素が右下に移動するよ。translateトランスフォーメーションを使っているんだ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform: translateでの移動</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
コードの説明:
.box: 初期トランスフォーメーションtranslate(0, 0)の要素.box:hover: 要素にカーソルを合わせると、1秒で100ピクセル右、50ピクセル下に平滑に移動するよ
GO TO FULL VERSION