Меняем слова с помощью CSS анимации

В сегодняшнем руководстве мы создадим новый эффект стилевого оформления сайта. Его суть будет заключаться в замене частей имеющихся предложений. «Замену» слов будем производить с помощью CSS анимации.

Замечание: данное руководство будет работать только в браузерах, которые поддерживают CSS анимацию.

Начнем!

Дальнейшее описание будет касаться демки №2

Разметка

Главный блок wrapper содержит заголовок (h2), в котором содержатся несколько прямых потомка (теги span) и два блока div под сменяющиеся слова:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<span>creating</span>
		<div class="rw-words rw-words-1">
			<span>breathtaking moments</span>
			<span>lovely sounds</span>
			<span>incredible magic</span>
			<span>unseen experiences</span>
			<span>happy feelings</span>
			<span>beautiful butterflies</span>
		</div>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-2">
			<span>sugar</span>
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Теперь нам нужно сделать так, чтобы каждый span блока rw-word мог появляться вовремя (вместе со своим аналогом). Реализовать это нам поможет CSS анимация. Для каждой секции будет своя анимация, руководить которой будет каждый тег span, при этом для каждого span будет своя временная задержка. Теперь взглянем на CSS.

CSS3

Сперва стилизуем главный блок wrapper и отцентрируем его:

     
.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
}

Добавим тень ко всем текстовым элементам, которые расположены в загловке:

     
.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Добавим специфичный стиль для тегов span:

     .rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

Секции (блоки со сменяющимся текстом) будут отображаться как строковые (inline) элементы, это позволит нам «помещать» их в предложение без разбития потока:

     .rw-words{
	display: inline;
	text-indent: 10px;
}

Каждый span внутри блока rw-words будет позиционирован абсолютно. Также спрячем выступающие элементы.

     .rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	color: #6b969d;
}

Теперь запустим две анимации. Как было сказано ранее, в каждом блоке div для каждого span будет одна и та же анимация, но выполняться она будет с разными временными задержками.

     
.rw-words-1 span{
	animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
	animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) { 
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) { 
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
	animation-delay: 15s; 
	color: #9b6b9d;
}

В нашей анимации каждый span будет виден 3 секунды, отсюда и необходимость во временных задержках (animation-delay). Все анимация будет длиться 6 (количество изображений) х 3 (количество секунд показа изображений) = 18 секунд.

Нам требуется установить правильное процентное отношение для значения свойства opacity (или любого другого, которое отвечает за появление span). После настройки и выбора наилучших решений, анимация для первых слов будет следующий:

     
keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

Мы скрываем span и анимируем его высоту.

Для второго блока div мы также скрываем слова, плюс анимируем ширину. Здесь мы немного увеличили шаг, чтобы слова появлялись несколько позже, чем слова первого div.

     
@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

Вот и все! Существует множество возможностей для анимации, ознакомиться с некоторыми из них можно на приведенных примерах.

Источник