A Pen by Mikhail Niedre.

fence-animation.markdown

fence animation

walks near the black fence. webkit bug https://bugs.webkit.org/show_bug.cgi?id=108895

A Pen by Mikhail Niedre on CodePen.

License.

index.html

	<footer id="fence">
		<p id="copy">Copyleft</p>
	</footer>

style.css

body {
			background-color: #fff;
		}
		#fence {
			position: absolute;
			bottom: 0;
			height: 100px;
			width: 100%;
			text-align: center;
			background-color: #111;
		}
		#copy {
			color: #f1f2f3;
			margin: 20px 0;
		}

/* fence */
		#fence:before {
			/* Set the footer height here */
			display: block;
			content: " ";
			height: 50px;
			margin-top: -25px;
			background-position: 50px 0px;
			background-size: 50px 100%;	
			background-image: 
			linear-gradient(-45deg, #000 50%, transparent 50%)
			,
			linear-gradient(45deg, #000 50%, transparent 50%); 
			
		  background-repeat: repeat-x;
			animation: animatedBackground 2s linear infinite;
		}

@keyframes animatedBackground {
		/* webkit bug https://bugs.webkit.org/show_bug.cgi?id=108895 */
			from { background-position: 50px 0px; }
			to { background-position: 0px 0px; }
		}