Header Ads Widget

CSS background animation

My codding spot June 25, 2022

This post will show you various background animation examples simply using HTML and CSS.


CSS background animation
CSS background animation 



(1) CSS background color change animation

This is simple animation. In background multiple colors are changing. 


<!DOCTYPE html>
<html>
<head>
<title>background animation:- color change</title>
<style>
h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
}
body{
background-color:#eb6223;
animation-name:colrchng;
animation-duration:15s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes colrchng{
0%{background-color:#5e2005;}
30%{background-color:#fcc211;}
60%{background-color:#d36d82;}
100%{background-color:#dcad72;}
}
</style>
</head>
<body>
<h2>Background color change</h2>
</body>
</html>

Output:-

(2) CSS linear gradient background animation

In linear gradient animation 3 colors are taken. In @keyframes, percentage of all colors are taken in decreasing order one by one
So when animation cycle start,   the acquired space of colors are changing from more to less. The transition of colors display at angles of 45 degree. 


<!DOCTYPE html>
<html>
<head>
<title>Gradient animation</title>
</head>
<style>
h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
}
body{
background-image:linear-gradient(45deg, #8e61e9,#9194bc,#ff5aa6);
background-repeat:no-repeat;
background-size:1500px 1500px;
animation-name:grdanim;
animation-duration:10s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes grdanim{
0%{background-image:linear-gradient(45deg,#8e61e9 90%,#9194bc,#ff5aa6);}
15%{background-image:linear-gradient(45deg,#8e61e9 40%,#9194bc,#ff5aa6);}
30%{background-image:linear-gradient(45deg,#8e61e9 10%,#9194nc,#ff5aa6);}
45%{background-image:linear-gradient(45deg,#8e61e9,#9194bc 90%,#ff5aa6);}
60%{background-image:linear-gradient(45deg,#8e61e9,#9194bc 40%,#ff5aa6);}
70%{background-image:linear-gradient(45deg,#8e61e9,#9194bc 10%,#ff5aa6);}
80%{background-image:linear-gradient(45deg,#8e61e9,#9194bc,#ff5aa6 90%);}
90%{background-image:linear-gradient(45deg,#8e61e9,#9194bc,#ff5aa6 40%);}
100%{background-image:linear-gradient(45deg,#8e61e9,#9194nc,#ff5aa6 10%);}
}
</style>
<body>
<h2>Gradient background animation</h2>
</body>
</html>

Output:-

(3) CSS radial gradient background animation 

The radial gradient background animation display transition of colors elliptical form with centered position. 


<!DOCTYPE html>
<html>
<head>
<title>Gradient animation</title>
</head>
<style>
h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
}
body{
background-image:radial-gradient(#d4622b,#b0802a,#815947);
background-repeat:no-repeat;
background-position:center;
background-size:1500px 1500px;
animation-name:radigrd;
animation-duration:10s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes radigrd{
0%{background-image:radial-gradient(#d4622b,#b0802a,#815947);}
50%{background-image:radial-gradient(#815947,#d4622b,#b0802a);}
100%{background-image:radial-gradient(#b0802a,#815947,#d4622b);}
}
</style>
<body>
<h2>Gradient background animation</h2>
</body>
</html>

Output:-

(4) CSS transparent line background animation 

In this example multiple <div> elements are used to create thin lines. Because this is background animation, all <div> elements position set to relative. So animation runs in background. 

<!DOCTYPE html>
<html>
<head>
<title>transparent line background animation</title>
</head>
<style>
body{
background-color:#660099;
}
h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
}
.box1,.box2,.box3,.box4,.box5{
position:relative;
height:100px;
width:5px;
opacity:0.4;
background-color:#cccccc;
border-radius:20px;
animation-iteration-count:infinite;
}
.box1{
top:0;
left:10%;
animation-name:bg1;
animation-duration:3s;
animation-timing-function:linear;
}
.box2{
top:-100px;
left:30%;
animation-name:bg2;
animation-duration:3s;
animation-timing-function:linear;
}
.box3{
top:-200px;
left:50%;
animation-name:bg3;
animation-duration:3s;
animation-timing-function:linear;
}
.box4{
top:-300px;
left:70%;
animation-name:bg4;
animation-duration:3s;
animation-timing-function:linear;
}
.box5{
top:-400px;
left:90%;
animation-name:bg5;
animation-duration:3s;
animation-timing-function:linear;
}
@keyframes bg1{
0%{top:100px;}
20%{top:200px;}
40%{top:300px;}
60%{top:400px;}
80%{top:500px;}
}
@keyframes bg2{
0%{top:100px;}
20%{top:200px;}
40%{top:300px;}
60%{top:400px;}
}
@keyframes bg3{
0%{top:100px;}
20%{top:200px;}
40%{top:300px;}
}
@keyframes bg4{
0%{top:50px;}
20%{top:100px;}
40%{top:150px;}
60%{top:200px;}
}
@keyframes bg5{
0%{top:30px;}
20%{top:60px;}
40%{top:100px;}
}
</style>
<body>
<h2>Animated background</h2>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>

Output:-

(5) CSS background image animation 

You can also put images in background with animation effects. In example animation of image run in background of page. Speed of changing one image to another is controlled by animation duration.


<!DOCTYPE html>
<html>
<head>
<title>background image animation</title>
</head>
<style>
h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
color:#CC0000;
}
body{
background-image:url(images/hd-wallpaper-g6914cd217_1920.jpg);
background-position:top;
background-size:1500px;
background-repeat:no-repeat;
animation:imgbg 5s ease-in-out infinite;
}
@keyframes imgbg{
0%{background-image:url(images/dahlia-g84ff66504_1920.jpg);}
35%{background-image:url(images/anemone-g593c573b7_1920.jpg);}
70%{background-image:url(images/pexels-hilary-halliwell-5184968.jpg);}
}
</style>
<body>
<h2>Background image animation</h2>
</body>
</html>

Output:-

(6) CSS background image animation (with size change)

In this example size of each images changes from small to large.

<!DOCTYPE html>
<html>
<head>
<title>background image animation</title>
</head>
<style>
h2{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
color:#CC0000;
}
body{
background-image:url(images/hd-wallpaper-g6914cd217_1920.jpg);
background-position:top;
background-size:1500px;
background-repeat:no-repeat;
animation:imgbg 5s linear infinite;
}
@keyframes imgbg{
0%{background-image:url(images/hd-wallpaper-g6914cd217_1920.jpg);background-size:100px;}
10%{background-image:url(images/hd-wallpaper-g6914cd217_1920.jpg);background-size:500px;}
20%{background-image:url(images/hd-wallpaper-g6914cd217_1920.jpg);background-size:1500px;}
40%{background-image:url(images/anemone-g593c573b7_1920.jpg);background-size:100px;}
50%{background-image:url(images/anemone-g593c573b7_1920.jpg);background-size:500px;}
60%{background-image:url(images/anemone-g593c573b7_1920.jpg);background-size:1500px;}
80%{background-image:url(images/dahlia-g84ff66504_1920.jpg);background-size:100px;}
90%{background-image:url(images/dahlia-g84ff66504_1920.jpg);background-size:500px;}
100%{background-image:url(images/dahlia-g84ff66504_1920.jpg);background-size:1500px;}
}
</style>
<body>
<h2>Background image animation</h2>
</body>
</html>

Output:-

Summary 

We have seen 6 different ways of background animation.
background-size property specifies the size of images. 
background-repeat property specifies how to repeat or not repeat image. You can repeat image on X-axis, Y-axis or both. If you want to not repeat image set no-repeat to background-repeat.
background-position property specify the position of an image (top, bottom, left, right or center).

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments