stefan22
12/2/2017 - 9:18 AM

animating a background image with CSS keyframes

animating a background image with CSS keyframes 1- add background image 2- create a keyframe property 3 - call the animation keyframe from the other Css property

backgroundImageKeyFrame.css
content_copyfile_download
/*
background image css keyframe animation
note => -2122 is the width of my background image
*/

figure {
	width: 100%;
	margin: 0;
	padding: 350px 0 0 0;
	position: absolute;
	left: 0;
	bottom: 0px;
	overflow: hidden;
	background:url(images/clouds_tile.jpg);
	animation_name: clouds_tile 75s linear infinite;
	
}

@keyframes clouds_anima {
	
	0% {
		background-position: 0 0;
	}
	
	100% {
		background-position: -2122 0;   //2122 is the fullwidth of img
	}
	
	
	
}