CSS3 BG animation Depth of Field

CSS3 BG animation Depth of Field

by Andrew Pougher

HTML

<div class="content-block">
	<div class="text">:hover</div>
	<div class="bg" id="bg-hover"></div>
</div>

<p>
	<a href="#bg-target">Click to set hash for :target</a>
</p>

<div class="content-block">
	<div class="text">:target</div>
	<div class="bg" id="bg-target"></div>
</div>

<div class="content-block">
	<div class="text">animation</div>
	<div class="bg" id="bg-keyframes"></div>
</div>

CSS

body {
	    background:#dd6800;
		margin:0;
		padding:0;
		text-align:center;
	}
	.content-block {
		position:relative;
		width:100%;
		height:200px;
		margin:20px auto;
		overflow:hidden;
	}
	.text {
		font:30px / 30px sans-serif;
		z-index:10;
		width:200px;
		position:absolute;
		top:85px;
		left:50%;
		margin-left:-50px;
		color:#fff;
		text-shadow:0 0 10px #000;
		text-align:center;
	}
	.bg {
		z-index:1; /* put it below the text */
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background:url('http://brandoral.com/img/test.png') 0 0, url('http://brandoral.com/img/test.png') 40% 0, url('http://brandoral.com/img/test.png') 80% 0, #dd6800;
		-webkit-transition: left 300s linear;
		   -moz-transition: left 300s linear;
		     -o-transition: left 300s linear;
		        transition: left 300s linear;
	}
	#bg-hover:hover, #bg-target:target {
		left:-9999px;
	}
	#bg-keyframes {
		-webkit-animation: moving-images 400s linear infinite;
		   -moz-animation: moving-images 400s linear infinite;
		     -o-animation: moving-images 400s linear infinite;
		        animation: moving-images 400s linear infinite;
	}
	@keyframes moving-images {
		0%   {left:0;}
		50%  {left:-9999px;}
		100% {left:0;}
	}
	@-moz-keyframes moving-images { 
		0%   {left:0;}
		50%  {left:-9999px;}
		100% {left:0;}
	}
	@-webkit-keyframes moving-images { 
		0%   {left:0;}
		50%  {left:-9999px;}
		100% {left:0;}
	}
	@-o-keyframes moving-images { 
		0%   {left:0;}
		50%  {left:-9999px;}
		100% {left:0;}
	}