CSS Background Animations

In this example below you will see how to do a CSS Background Animations with some HTML / CSS and Javascript

We'll use CSS animations instead of transitions for this effect

Thumbnail
This awesome code was written by furkanyanbas, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright furkanyanbas ©
  • HTML
  • CSS
  • JavaScript
    <h1>CSS for background animation</h1>
<div class="content">
  <div class="anime">
    <i class="first"></i>
  </div>
  <div class="anime">
    <i class="second"></i>
  </div>
  <div class="anime">
    <i class="third"></i>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/furkanyanbas/css-background-animations-WrMMML */
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500,100&subset=latin,latin-ext);
@white:#fff;
@background: #0E80C4;

@keyframes play {
  100% { background-position: -1000px; }
}
@keyframes anime-first {
  100% { background-position:-1498px 0; }
}
@keyframes anime-second {
  100% { background-position:-1498px -200px; }
}
@keyframes anime-third {
  100% { background-position:-1498px -102px; }
}

.playanimation(@anime,@string,@type){
	animation: @anime @string @type infinite;
	-moz-animation: @anime @string @type infinite;
	-webkit-animation: @anime @string @type infinite;
	-ms-animation: @anime @string @type infinite;
	-o-animation: @anime @string @type infinite;
}


body{
	width: 100%;
	height: 100vh;
	background: url("http://htmlpin.com/wp-content/uploads/2016/01/intro-bg.gif");
	.playanimation(play,10s,linear);
	display: flex;
	align-items:center;
	justify-content: center;
	flex-direction:column;
	font-family: 'Roboto', sans-serif;
	font-size: 5vh;
	color: @white;
	h1{
		margin-bottom: 2vh;
	}
}

.content{
	width: 600px;
	background: @white;
	height: 250px;
	display: flex;
	.anime{
		width: 200px;
		height: 250px;
		display: flex;
		align-items: center;
    	justify-content: center;
    	cursor: pointer;
		i{
			background: url("http://htmlpin.com/wp-content/uploads/2016/01/animate.png") no-repeat;
			width: 107px;
			height: 98px;
			display: inline-block;
			&.first{
				background-position: 0 -300px;
			}
			&.second{
				background-position: -95px -300px;
			}
			&.third{
				background-position: -222px -300px;
			}
		}
		&:hover{
			background: @background;
			i{
				&.first{
					.playanimation(anime-first,1.5s,steps(14));
					background-position: 0 0;
				}
				&.second{
					.playanimation(anime-second,1.5s,steps(14));
					background-position: 0 -200px;
				}
				&.third{
					.playanimation(anime-third,1.5s,steps(14));
					background-position: 0 -102px;
				}
			}
		}
	}
}



/*Downloaded from https://www.codeseek.co/furkanyanbas/css-background-animations-WrMMML */
    

Comments