Анимация — обширный модуль в CSS. К сожалению, описать все возможности за один урок невозможно. В этом уроке будет показан базовый принцип анимации в CSS на основе @keyframes. Для примера, сделаем анимацию текста — цвет текста меняется с голубого на красный.
Для начала создадим файл "index.html" и запишем в нем следующее:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>CSS animation</title>
<style>
</style>
</head>
<body>
</body>
</html>
Для того, чтобы задать анимацию, используется правило @keyframes и название анимации:
Запишем в теге "<style></style>":
@keyframes color-change {
// Внутри будет наша анимация
}
Название анимации может быть любым. Вы его выбираете самостоятельно. В последствии именно по этому названию свойство animation будет знать, какую именно анимацию необходимо воспроизвести.
Внутри @keyframes необходимо указать различные временные промежутки, в которых будут происходить изменения. Например, на старте (0% завершённости анимации) будет голубой текст, в середине анимации (50%) — красный, и в конце (100%) — возвращаем голубой цвет.
@keyframes color-change {
0% {
color: blue;
}
50% {
color: red;
}
100% {
color: blue;
}
}
Теперь необходимо применить созданную нами анимацию к тексту на странице. Для этого используется правило animation с тремя основными значениями:
- Название анимации
- Длительность анимации. Указывается в секундах (1s, 2s, 3s и так далее)
- Бесконечная анимация или нет (если бесконечная, то указывается параметр infinite)
.animation-text { animation: color-change 3s infinite; }
Осталось создать параграф с необходимым классом, и анимация начнёт работать.
В теге "<body></body>" записываем:
<p class="animation-text">здесь аимированный текст</p>