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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: