Приветствую всех. Сегодня я расскажу вам о том, как делается в css анимация текста. Ранее в одной из своих статей я уже рассматривал несколько анимационных эффектов и как их создать. В частности, здесь. Сегодня же мы применим это к тексту.
Заготовка
В общем-то, в качестве заготовки у меня будет обычный div с определенным стилевым оформлением. Ничего другого я придумывать не буду.
.div-anim{
color: orange;
text-shadow: 0 0 1px #000;
width: 200px;
font-size: 40px;
margin: 0 auto;
}
В общем, простой блок с текстом. На нем мы и будем проверять анимационные эффекты. Я специально задал ему фиксированную ширину, потому что иначе блок растянулся бы на все окно и многие эффекты работали бы не так, как ожидается.
Поворот текста
@keyframes text{
from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
Это тот код, который нужно вставить в css. Если вы читали мою первую статью об анимационных эффектах, то уже знаете о том, что такое keyframes (ссылка выше). Тут я подробно объяснять не буду, это просто набор кадров анимации. В начале элемент стоит на месте, а к концу анимации он должен повернуться на 360 градусов и вернуться в исходное положение. Если вы хотите, чтобы движение происходило против часовой стрелки, то значение должно быть отрицательным.
Хорошо, сам эффект есть, но его еще нужно связать с нашим блоком. Для этого ему нужно добавить такие свойства:
animation-name: text;
animation-duration: 1.5s;
animation-iteration-count: infinite;
То есть имя анимации, ее длительность и кол-во повторений. Как видите, я указал длительность в полторы секунды и бесконечное количество повторов. Также вы должны без ошибок указать имя анимации. Если все сделано правильно, эффект начнет применяться:
Отражение текста
Создадим другой анимационный эффект:
@keyframes text2{
50%{transform: scaleX(-1)}
100%{transform: scaleX(1)}
}
Ну и примените его, просто поменяв имя анимации. Получится вот так:
Перемещение текста
Вот так, например:
@keyframes text3{
50%{transform: translateX(100px)}
to{transform: translateX(-100px)}
}
То есть на половине анимации движем его на 100 пикселей вправо, а потом к завершению возвращаем назад. Как видите, вы можете использовать ключевые слова from и to, которые обозначают 0 и 100% соответственно, а можете использовать проценты. Разницы нет. С помощью процентов только можно управлять анимацией гораздо более гибко.
Другие эффекты
Соответственно, суть я вам показал, а дальше вы можете уже сами разобраться, если знаете css. Если не знаете и хотите изучить, то прошу прочитать это.
@keyframes text4{
50%{letter-spacing: 7px;}
100%{letter-spacing: 0;}
}
Получается растяжение, а потом обратно стягивание:
Одновременное увеличение текста с добавлением тени:
@keyframes text5{
50%{text-shadow: 0 0 10px #000; transform: scale(1.5, 1.5)}
100%{text-shadow: 0 0 0 #000;}
}
В общем, какие вы придумаете анимационные эффекты, ограничено лишь вашей фантазией и знаниями css. Основные свойства для текста вы можете найти в этой статье.
В общем, такую информацию я вам сегодня предложил. Если есть какие-то вопросы и замечания, просьба писать в комментарии