How To Gradually Change The Background Image Position In CSS

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Using CSS animation we can gradually change the background-position from "top left" to "center", and back to "top left".So today we discuss how to do it.

How To Gradually Change The Background Image Position In CSS

Complete Code For Gradually Change The Background Image Position In CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Gradually Change The Background Image Position In CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<style>
    * {
        box-sizing: border-box;
    }

    body {

        background-color: #777891;

    }

    #myDIV {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        background-image: url('../image/chair.jpg');
        background-position: top left;
        animation: mymove 5s infinite;
    }

    @keyframes mymove {
        50% {background-position: center;}
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Gradually Change The Background Image Position In CSS</h1>
    </div>
    <div class="well">
        <div id="myDIV"></div>
    </div>
</div>
</body>
</html>
                                   

Related Post