css 使用CSS关键帧动画背景图像

Posted 2021-05-13

/*
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
	}
	
	
	
}