How To Create CSS Animation For Gradually Change Image Size

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

In CSS we can set image to background so that Gradually change the background color and image position.so for that we use background-color, background-position, and background-size properties .So today we discuss how to do it.

How To Create CSS Animation For Gradually Change Image Size

Complete Code For  Creating CSS Animation For Gradually Change Image Size.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Animation Using Z Index Property 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: 600px;
        height: 400px;
        background: red url('../image/demo1.jpg') no-repeat top left/5px 5px;
        animation: mymove 20s infinite;
    }

    @keyframes mymove {
        50% {
            background: blue bottom right/200px 200px;
        }
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Animation Using Z Index Property In CSS</h1>
    </div>
    <div class="well">
        <div id="myDIV"></div>

    </div>

</div>
</body>
</html>

Related Post