Меняем слова в предложениях с помощью CSS3

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

Следующий код соответствует демонстрации 2.

Разметка HTML

У нас есть основной контейнер с заголовоком h2, в котором содержится предложение в элементах span и два раздела для меняющихся слов:

                                               <section class="rw-wrapper">

                                                               <h2 class="rw-sentence">

                                                                              <span>Настоящая поэзия похожа</span>

                                                                              <br />

                                                                              <span> на создание</span>

                                                                              <div class="rw-words rw-words-1">

                                                                                              <span>захватывающих дух моментов</span>

                                                                                              <span>звуков любви</span>

                                                                                              <span>невероятной магии</span>

                                                                                              <span>уникального опыта</span>

                                                                                              <span>мгновений счастья</span>

                                                                                              <span>прекрасной бабочкиы</span>

                                                                              </div>

                                                                              <br />

                                                                              <span>легкими касаниями</span>

                                                                              <div class="rw-words rw-words-2">

                                                                                              <span>пространства</span>

                                                                                              <span>цвета</span>

                                                                                              <span>счастья</span>

                                                                                              <span>чуда</span>

                                                                                              <span>вдохновенья</span>

                                                                                              <span>удачи</span>

                                                                              </div>

                                                               </h2>

                                               </section>

Нужно, чтобы каждый элемент span в разделе с классом  rw-words появлялся на некоторое время по очереди. Для решения задачи будем использовать анимации CSS. Создадим  одну анимацию для каждого раздела и каждого элемента span, но с разными задержками.

CSS

Для начала определим стили для основного контейнера и отцентрируем его на странице:

.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;

}

Элементы div будут выводиться как строчные, что позволит нам вставлять их в предложения без разрыва шаблона:

.rw-words{

    display: inline;

    text-indent: 10px;

}

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

.rw-words span{

    position: absolute;

    opacity: 0;

    overflow: hidden;

    width: 100%;

    color: #6b969d;

}

Теперь запускаем две анимации . Одна анимация будет использоваться для всех элементов 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 в течении трех секунд (время задержки). Вся анимация выполняется 6 (количество слов) * 3 (время вывода каждого слова) = 18 секунд. Нужно установить правильное значение для свойства непрозрачности в разных кадрах анимации (то есть когда будет виден элемент span). Делим 6 на 18 и получаем 0.333, что дает 33% от всего времени анимации. Вот что получается для анимации первого слова:

@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; }

}

Будет анимироватся процесс появления слова и изменение высоты элемента.

Анимация для второй части также будет проявлять слово и изменение его ширины. Здесь используется небольшой шаг в процентном отношении анимации, поэтому следующее слово будет появляться немного позже исчезновения предыдущего:

@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; }

}

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/
Перевел: Сергей Фастунов