<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анимация голубого блока</title>
<style>
/* Контейнер для анимации, имитирующий страницу */
.page-container {
width: 100%;
height: 600px;
background-color: #fcfcfc;
position: relative;
overflow: hidden;
border: 2px dashed #bbb;
}
/* Начальный стиль и позиционирование блока */
.blue-block {
position: absolute;
/* Размеры по умолчанию */
width: 200px;
height: 100px;
background-color: #00bfff; /* Голубой цвет (DeepSkyBlue) */
/* Стили для текста внутри блока */
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
border-radius: 4px;
/* Подключение анимации: длительность 6 секунд, бесконечный цикл */
animation: blueBlockMotion 6s infinite ease-in-out;
}
/* Таймлайн анимации */
@keyframes blueBlockMotion {
/* 1. Старт: блок находится снизу по центру страницы */
0% {
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 100px;
}
/* 2. Движение в центр страницы и уменьшение размеров */
50% {
bottom: 250px; /* Центр по вертикали (600px / 2 - полувысота) */
left: 50%;
transform: translateX(-50%);
width: 100px; /* Уменьшение ширины в 2 раза */
height: 50px; /* Уменьшение высоты в 2 раза */
}
/* 3. Перемещение влево и возврат к начальным размерам */
100% {
bottom: 250px;
left: 0; /* Сдвиг к левому краю страницы */
transform: translateX(0);
width: 200px; /* Возврат к исходной ширине */
height: 100px; /* Возврат к исходной высоте */
}
}
</style>
</head>
<body>
<h2 style="font-family: Arial, sans-serif; text-align: center;">Анимация голубого блока</h2>
<div class="page-container">
<div class="blue-block">
Голубой блок
</div>
</div>
</body>
</html>
