How Gradually Change Bottom Position Using CSS Animation

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

Using CSS animation gradually change the bottom property from 0px to 100px, 100px to 200px,200px to 100px then back,so today we discuss how to do it.

How Gradually Change Bottom Position Using CSS Animation

Complete Code For Gradually Change Bottom Position Using CSS Animation.

<!DOCTYPE html>
<html>
<head>
    <title>How Gradually Change Bottom Position Using CSS Animation</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: #777891;
    }

    #myDIV {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: green;
        color: white;
        bottom: 0px;
        animation: mymove 5s infinite;
    }

    @keyframes mymove {
        25% {bottom: 100px;}
        50% {bottom: 200px;}
        100% {bottom: 300px;}
    }

</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;"> Gradually Change Bottom Position Using CSS Animation</h1>
    </div>
    <div class="well">
        <div id="myDIV"></div>
    </div>
</div>
</body>
</html>

Related Post