はじめに
CSSを学びたいStep8です！今回はアニメーションのkeyframesを学んでいきます！
1. keyframes slide
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyframes Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
styles.css
/* アニメーションの定義 */
@keyframes slide {
0% {
transform: translateX(0);
background-color: #3498db;
}
50% {
transform: translateX(100px);
background-color: #2ecc71;
}
100% {
transform: translateX(0);
background-color: #3498db;
}
}
/* アニメーションを適用する要素のスタイル */
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: slide 3s infinite;
}
2. keyframes rotate
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rotate-box"></div>
</body>
</html>
styles.css
/* 回転アニメーションの定義 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* アニメーションを適用する要素のスタイル */
.rotate-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: rotate 2s linear infinite;
}
3. keyframes fadeIn
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade In Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="fade-in-box"></div>
</body>
</html>
styles.css
/* フェードインアニメーションの定義 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* アニメーションを適用する要素のスタイル */
.fade-in-box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: fadeIn 2s ease-in-out;
}
4. keyframes scaleUp
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale Up Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scale-up-box"></div>
</body>
</html>
styles.css
/* スケールアップアニメーションの定義 */
@keyframes scaleUp {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
/* アニメーションを適用する要素のスタイル */
.scale-up-box {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation: scaleUp 1s ease-in-out infinite alternate;
}
おわりに
アニメーションを実装しました！！こういうのが実現できるのはCSSのいいところですね！