<marquee>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</marquee>

<style type="text/css">
	marquee div {
		width:20px;
		height:20px;
		display:inline-block;
		border:1px solid red;
	}
</style>

Пример бегущей строки marquee в FireFox

И пока нет приемлемой поддержки значений marquee-line и marquee-block свойства overflow-style необходимо искать альтернативы.

Конечно же, существует множество реализаций на JavaScript, в том числе и jQuery-плагинов. Однако порой использование JavaScript является избыточным, поскольку зачастую блок несет в большей степени не информативную, а декоративную составляющую. Поэтому реализация на CSS3 с использованием свойств animation является вполне приемлемой, поскольку поддерживается подавляющим большинством современных браузеров.

Итак, суть метода проста и сводится к следующему. Два одинаковых контейнера абсолютно позиционируются друг за другом. Обоим блокам задается анимация, представляющая собой изменение позиции левой позиции от 0 до -100%. При этом анимация задана как бесконечная. При сдвиге первого блока начинает показываться часть второго блока. Когда первый блок достигает позиции -100% анимация начинается сначала. Начальная позиция блоков обозначена на рисунке, представленном ниже, красным цветом, конечная — зеленым.

Следует упомянуть, что в приведенном примере ширина скроллируемого блока равна 100% ширины окна. Соответственно все фотографии, которые окажутся за пределами указанной ширины скроллируемого блока будут обрезаться.

<section class="b-marquee-line">
    <div class="b-marquee-line__flow">
        <div class="b-marquee-line__flow-in">
            <span class="b-marquee-line__flow-block">
                <img src="asserts/image-1.jpg" class="b-marquee-line__flow-item" alt="" border="0">
                <img src="asserts/image-2.jpg" class="b-marquee-line__flow-item" alt="" border="0">
                <img src="asserts/image-3.jpg" class="b-marquee-line__flow-item" alt="" border="0">
                <img src="asserts/image-4.jpg" class="b-marquee-line__flow-item" alt="" border="0">
            </span>
            <span class="b-marquee-line__flow-block">
                <img src="asserts/image-1.jpg" class="b-marquee-line__flow-item" alt="" border="0">
                <img src="asserts/image-2.jpg" class="b-marquee-line__flow-item" alt="" border="0">
                <img src="asserts/image-3.jpg" class="b-marquee-line__flow-item" alt="" border="0">
                <img src="asserts/image-4.jpg" class="b-marquee-line__flow-item" alt="" border="0">
            </span>
        </div>
    </div>
</section>

Поддержка браузером анимации проверяется с помощью библиотеки Modernizr, которая выставляет у html класс cssanimations или no-cssanimations. Если браузер на поддерживает анимацию, то выводим картинки статикой без каких-либо дополнительных эффектов. Ниже приведен код стилей на SCSS, скомпилированные стили на CSS можно найти по ссылке на гитхабе.

$blockHeight: 420px;

@-webkit-keyframes marquee {
    0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}

@keyframes marquee {
	0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}

.b-marquee-line {
	&__flow {
		background: #f0f0f0;
		font-size: 0;
		line-height: 0;
		height: $blockHeight;
		overflow: hidden;
		position: relative;
		width: 100%;
		&-in {
			display: block;
			height: $blockHeight;
			.cssanimations & {
				width: 200%;
				position: absolute;
				overflow: hidden;
				-webkit-animation: marquee 40s linear infinite;
						animation: marquee 40s linear infinite;
			}
		}
		&-block {
			white-space: nowrap;
			.no-cssanimations &:last-child {
				display: none;
			}
			.cssanimations & {
				white-space: nowrap;
				float: left;
				width: 50%;
			}
		}
		&-item {
			height: $blockHeight;
		}
	}
}

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

Пробуем, комментируем, пишем свои способы решения вышеописанной задачи.