Scrolling images using CSS (using no vendor prefixes)

index.html

<div id='horizontalScroll' class='scrollContainer'>
    <div class='images-1'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Linux_kernel_map.png'/>
    </div>
    <div class='images-loop'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Linux_kernel_map.png'/>
    </div>
</div>

<div id='verticalScroll' class="scrollContainer">
    <div class='images-1'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Linux_kernel_map.png'/>
    </div>
    <div class='images-loop'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/5/5b/Linux_kernel_map.png'/>
    </div>
</div>

<a id='alternateVersion' href='https://codepen.io/idettman/pen/XbzNgE/'>View Prefixed Version</a>

scrolling-images-using-css-using-no-vendor-prefixes.markdown

Scrolling images using CSS (using no vendor prefixes)

Image scroller using CSS transforms and keyframes set to loop on complete.

A Pen by Isaac Dettman on CodePen.

License.

style.css

body
{
  overflow: hidden;
  height: 860px;
}

.scrollContainer
{
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 1024px;
}

.scrollContainer > div
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#horizontalScroll
{
	height: 268px;
}

#horizontalScroll > div
{
	animation-name: animateScrollLeft;
}

#horizontalScroll > div.images-loop
{
	left: 1000px;
}

@keyframes animateScrollLeft
{
	from
	{
		transform: translateX(0);
	}
	to
	{
		transform: translateX(-1000px);
	}
}

#verticalScroll
{
	height: 760px;
	top: 10px;
}

#verticalScroll > div.images-loop
{
	top: 760px;
}

#verticalScroll > div
{
	animation-name: animateScrollDown;
}

@keyframes animateScrollDown
{
	from
	{
		transform: translateY(0);
	}
	to
	{
		transform: translateY(-760px);
	}
}




#alternateVersion
{
  position: absolute;
  top: 4px;
  left:4px;
  font-size: 0.85em;
  font-family: sans-serif;
  background-color: #666666;
  text-decoration: none;
  color: white;
  border: 1px solid orange;
  border-radius: 4px;
  padding: 6px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

#alternateVersion:hover
{
  border-color: gold;
  text-shadow: 1px 1px 6px rgba(255, 220, 220, 0.9);
}