Embedded Files
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<!--🟢 Пояснення:
transition: background-color 0.5s, transform 0.3s; — задає плавний перехід при зміні властивостей.
:hover — активується, коли користувач наводить курсор.> -->
<style>
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
transition: background-color 0.5s, transform 0.3s;
}
button:hover {
background-color: #2ecc71;
transform: scale(1.1);
}
</style>
</head>
<body>
<button>Наведи на мене</button>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<style>
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.square {
width: 50px;
height: 50px;
background-color: tomato;
animation: move 2s infinite;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Комбінування анімацій
Можна комбінувати переходи й анімації або кілька ефектів одночасно.
animation: bounce 1s infinite alternate, rotate 2s linear infinite;
⚙️ 4. Основні властивості animation:
Властивість
Опис
animation-name
Ім’я анімації (@keyframes)
animation-duration
Тривалість (наприклад, 2s)
animation-timing-function
Тип прискорення (linear, ease, ease-in-out)
animation-delay
Затримка перед стартом
animation-iteration-count
Кількість повторів або infinite
animation-direction
Напрямок (normal, reverse, alternate)
Приклад комплексної анімації
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<style>
@keyframes pulse {
0% { transform: scale(1); background-color: #ff6b6b; }
50% { transform: scale(1.2); background-color: #ffcc5c; }
100% { transform: scale(1); background-color: #ff6b6b; }
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<style>
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.text {
font-size: 2em;
color: #ffcc00;
animation: blink 1s infinite;
}
</style>
</head>
<body>
<p class="text">Мерехтливий текст</p>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.text {
font-size: 2em;
animation: bounce 2s infinite;
color: #ff6b6b;
}
</style>
</head>
<body>
<p class="text">Підстрибуючий текст</p>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<style>
.wave span {
font-size:24рх;
display: inline-block;
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.wave span:nth-child(1) { animation-delay: 0s; }
.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }
</style>
</head>
<body>
<p class="wave">
<span style="font-size:50px">П</span><span style="font-size:50px">р</span><span style="font-size:50px">и</span><span style="font-size:30px">в</span><span style="font-size:30px" >і</span><span style="font-size:30px">т</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<style>
.text {
font-size: 3em;
font-weight: bold;
background: linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #5f27cd);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 5s infinite linear;
}
@keyframes gradient {
0% { background-position: 0%; }
100% { background-position: 100%; }
}
</style>
</head>
<body>
<p class="text">Веселковий текст 🌈</p>
</body>
</html>
Page updated
Google Sites
Report abuse