はじめに
CSSを学びたいのStep9です！！今回はTransition、Transformに関して学ぼうと思います！！
Transitionとは
状態が変わるときにスムーズにアニメーションすることで、自然な動きを演出します。ホバー時やクリック時のエフェクトに頻繁に使われます。
Transformとは
要素を回転、拡大縮小、移動、斜め変形することができます。特にアニメーションと組み合わせると、インタラクティブで面白い効果が作れます。
成果物
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="transition-button">Hover me!</button>
</body>
</html>
styles.css
.transition-button {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.transition-button:hover {
background-color: #2ecc71; /* ホバー時に背景色を変更 */
transform: scale(1.1); /* ホバー時にサイズを拡大 */
}