Бегущая строка при помощи анимации на CSS3

Бегущая строка позволяет демонстрировать информацию в яркой динамической форме, используя различные спецэффекты, привлекая значительное внимание посетителей сайта. Так, например, информация может двигаться сверху вниз и снизу вверх, справа налево и слева на право, взад-вперед и обратно, медленно и быстро, пробегая только один раз, а затем оставаясь, как обычный текст. Могут поочередно печататься несколько строк.

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

Анимация CSS дает возможность использовать функцию определения времени анимации, которая решает, каким образом та будет развиваться до самого конца. Одна из таких функций определения времени называется steps () и позволяет назначить количество используемых анимацией кадров, она удалит привычную вам гладкую анимацию и создаст анимацию с некоторыми задержками – в точности такую, какая требуется нам для ввода текста.

С помощью функции steps () можно создать анимацию, которой потребуется всего лишь увеличивать к концу абзаца размер элемента с нуля до полного размера.

Начинаем с создания абзаца, который продемонстрирует работу анимированного процесса печати.
С помощью CSS мы добавим нужную анимацию. Далее добавим скрытое переполнение overflow: hidden; для изменения размера абзаца до 0 с тем, чтобы мы не смогли видеть текст. Наконец, можно добавить анимацию ввода текста при помощи функции определения времени steps ().
Анимация увеличит размер абзаца с 0 до 100%, создавая, таким образом, за 50 кадров эффект печати текста.

Посмотрите демо-пример, чтобы понять, как это смотрится.

Бегущая строка при помощи анимации на CSS3.

<p>Бегущая строка при помощи анимации на CSS3.</p>

p{
   width: 100%;
   white-space:nowrap;
   line-height: 50px;
   overflow:hidden;
   font-size: 20px;
   color: cornflowerblue;
   -webkit-animation: step 5s steps(50) infinite;
   animation: step 5s steps(50) infinite;
}
/*   Анимация   */
@keyframes step{
   0% { width: 0;}
   100% {width:100%;}
}
@-webkit-keyframes step{
   0% { width: 0;}
   100% {width:100%;}
}

Краткая расшифровка для: p{… animation: step 5s steps(50) infinite; }

• step — Название анимации (произвольно)
• 5s — Время анимации
• steps(50) — Количество «кадров» анимации
• infinite — Бесконечный повтор (для наглядности)

Получается как бы эффект печатающей машинки. А теперь заставим эту строчку двигаться, для этого достаточно прописать text-align: right; или text-align: center; и строка «побежит» вправо или только до центра соответственно.

Изменения и дополнения в стилях и результат (Если анимация закончила работу — перезагрузите страницу):

p.cen {
   .....
   text-align: right;
   /* К предыдущей записи добавилась цифра 3 - количество повторов анимации*/
   -webkit-animation: cen 5s steps(50) 3;
   animation: cen 5s steps(50) 3;    
}
@keyframes cen{
    from{ width: 0; }
}
@-webkit-keyframes cen{
    from{ width: 0; }
}

Бегущая строка при помощи анимации на CSS3.

p.alternat{
   .....
   text-align: right;
   opacity: 0;
   /* 2s - время задержки начала работы анимации,
      alternate -  анимация работает от начала до конца, и обратно в начало,
      forwards -  после анимации элемент «застывает» в крайнем кадре */
   -webkit-animation :alternat 5s steps(50) 2s 3 alternate forwards; 
   animation :alternat 5s steps(50) 2s 3 alternate forwards;    
} 
@keyframes alternat{
   0% { width: 0;
        opacity: 1}
   100% {width:100%;
         opacity: 1}
}
@-webkit-keyframes alternat {
   0% { width: 0;
        opacity: 1}
   100% {width:100%;
         opacity: 1}
}

Бегущая строка при помощи анимации на CSS3.

p.reverse {
   .....      
   text-align: right;
      /* reverse - анимация работает от конца в начало*/
   -webkit-animation :alternat 5s steps(50) 2s 3 reverse ; 
   animation :alternat 5s steps(50) 2s 3 reverse ;    
}
@keyframes reverse{
    0% { width: 0; }
   100% {width:100%;}
}
@-webkit-keyframes reverse {
    0% { width: 0; }
   100% {width:100%;}
}   

Бегущая строка при помощи анимации на CSS3.

Анимации начинают свою работу сразу при открытии страницы и после окончания цикла (в примерах выше повтор по 3 раза) останавливаются (исключение первый пример, там включено «бесконечное» проигрывание infinite) и начинают работать только после перезагрузки страницы.

Для того, чтобы анимации начинали работать по мере появления на странице в статье Анимация при скролле страницы.