HTML и CSS 0

Css. Анимация текста с помощью keyframes

css анимация текстаПриветствую всех. Сегодня я расскажу вам о том, как делается в 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. Основные свойства для текста вы можете найти в этой статье.

В общем, такую информацию я вам сегодня предложил. Если есть какие-то вопросы и замечания, просьба писать в комментарии smile

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5