Menu ▼



Posted By :
avatarDesignIsBack
Total Views : 664

Animating Background Gradient using Pure CSS 3

With CSS 3 now we can animate background gradients in all angles with custom colors.

In the below example, you can view the linear gradient flowing light blue to dark black from top to bottom.

The text "Animated Background using Pure CSS 3" can be seen fading in the background color in 10-20 seconds.

Preview

tooltip

Animated Background using Pure CSS 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
    height: 100vh;
}
#container {
    min-width: 100%;
    min-height: 100%;
    text-align: center;    
    background: linear-gradient(0deg, #00FFFF, #0000FF, #000000);
    background-size: 300% 300%;
    -webkit-animation: MoveBG 10s ease infinite;
    -moz-animation: MoveBG 10s ease infinite;
    -o-animation: MoveBG 10s ease infinite;
    animation: MoveBG 10s ease infinite;
}

@-webkit-keyframes MoveBG {
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}

@-moz-keyframes MoveBG {
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}
@-o-keyframes MoveBG {
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}
@keyframes MoveBG { 
    0%{background-position:0% 84%}
    50%{background-position:100% 16%}
    100%{background-position:0% 84%}
}
</style>
</head>
<body>
<div id="container">
    <h1>Animated Background using Pure CSS 3</h1>
</div>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com