Анимация текста в CSS
На этом уроке мы разберем основные правила CSS анимации на веб-странице, которые можно применить к любому элементу, а не только к тексту.
Просто вероятность того, что вам в дальнейшем потребуется анимировать именно текст, а не геометрические фигуры, крайне высока. Итак, приступим.
Я не буду подробно описывать, как стилизовался текст, остановимся только на самых сложных и важных моментах. Посмотреть весь код вы сможете на Codepen, ссылка будет внизу статьи.
HTML разметка
Создадим параграф p, внутри которого припишем тег span с нашим текстом.
<p>
<span>
Animated text
</span>
</p>
CSS стили
Параграф – тег p, будет служить ограничителем для подпрыгивающего текста. В качестве ограничителя выступит полупрозрачная двойная рамка, сверху и снизу. Никакой полезной нагрузки эта рамка не несёт, просто визуально, эффект анимации текста, будет красивее смотреться.
p {
border: 4px double rgba(255, 255, 255, 0.25);
border-width: 4px 0;
}
Подпрыгивать у нас будет тег span, внутри которого мы разместили текст с тенью. По умолчанию span является строчным элементом, но прописав ему display: block, мы сделали его блочным, иначе никакая анимация работать не будет.
span {
display: block;
}
Переходим к анимации текста
В CSS анимации могут участвовать все свойства, значения которых можно задать численно, в пикселях, процентах и в других единицах измерения. Обратите внимание, что изначально заданные единицы измерения элемента должны совпадать с анимированными, иначе браузер не отобразит анимацию. Например, если заданная высота в CSS стилях прописана в пикселях, то и в анимации высоту указывайте в пикселях.
Демонстрация.
Правило @keyframe
Создадим ключевые кадры нашей анимации. Сначала пишем @keyframes и сразу за ним название нашей анимации, которое придумываем сами. Желательно название давать осмысленное, у нас текст будет подпрыгивать к верху и поэтому назовем мы нашу анимацию bounce-top.
@keyframes bounce-top {
Далее задаём все кадры нашей анимации, как минимум, у любой анимации должны обязательно присутствовать: первый (0% или from) и последний (100% или to) кадры.
В нашей анимации будет 11 кадров, которые распределяются в процентах, например кадр 25%, означает, что прошло 25% анимации. Кадры с одинаковыми свойствами можно объединить, прописав их через запятую.
Мы будем сдвигать текст по оси Y, в соответствующем кадре на энное количество пикселей. За это отвечает свойство transform: translateY. При нулевом значении этого свойства, в пяти кадрах, текст будет падать вниз и снова слегка отскакивать.
У некоторых кадров прописано ещё два свойства, но у каждого свой вариант:
animation-timing-function: ease-in;
animation-timing-function: ease-out;
Это функция, которая обозначает то, как будет происходить анимация, равномерно или нет. При значении ease-in, анимация вначале ускоряется и наоборот замедляется - ease-out. Благодаря замедлению и ускорению, выглядит данный эффект реалистично.
See the Pen Animated text CSS3 by porsake (@porsake) on CodePen.
Для того, чтобы применить нашу анимацию к элементу span, необходимо к селектору span добавить строчку animation и прописать свойства, где
span {
animation: bounce-top 2s infinite both;
}
bounce-top – название анимации, у span и @keyframe название должно быть одинаковым.
2s – продолжительность анимации.
infinite – бесконечная анимация. Если мы хотим, ограничить число циклов анимации, то вместо infinite, надо поставить число. Для наглядности примера, у меня задана бесконечная анимация. Однако на реальном сайте, так не следует делать, достаточно заголовку подпрыгнуть несколько раз. Это реально раздражает, бесконечная анимация как-то оправдана, на элементе с призывом к действию.
both – CSS стили применяются к элементу до и после анимации.
Научиться применять полученные знания при создании сайтов, вам поможет этот видеокурс "HTML5 и CSS3 с Нуля до Гуру"
-
Создано 10.09.2018 10:36:08
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.