How To Create CSS Animation With Object Position Property

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

Using CSS Animation we can gradually change the position of the image inside its content box .so today we discuss how to do it.

How To Create CSS Animation With Object Position Property

Complete Code For Creating CSS Animation With Object Position Property.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create CSS Animation With Object Position Property</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"/>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    body {
        background-color: #666699;
    }
    #myImg {
        width: 200px;
        height: 200px;
        object-fit: cover;
        object-position: 0% 0%;
        animation: mymove 5s infinite;
    }

    @keyframes mymove {
        0% {
            object-position: 0% 0%;
        }
        25% {
            object-position: 20% 0%;
        }
        100% {
            object-position: 100% 100%;
        }
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Create CSS Animation With Object Position Property</h1>
    </div>
    <div class="well">
        <img src="https://cdn.hipwallpaper.com/i/26/82/eIwaiA.jpg" alt="bird" id="myImg" width="400" height="300">
        <img src="https://cdn.hipwallpaper.com/i/68/68/TBk5tu.jpg" alt="bird" id="myImg" width="400" height="300">
        <img src="https://cdn.hipwallpaper.com/i/16/37/TFogGm.jpg" alt="bird" id="myImg" width="400" height="300">

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