Animated horizontal divider css

Horizental Separator using css

Hello friends today in this artical we will learn how to create Animated Dividers using css.

<div class="divider_container">
   <div class="line1"></div>
   <div class="line2"></div>
</div>


<style type="text/css">

body
{
   background:#bbff74;
}

   .divider_container
{
    width:150px;
    max-width:200px;
    height:20px;
    margin:0px auto;
}

.divider_container .line1
{
    width:100%;
    height:2px;
    background:#51762b;
}

.divider_container .line2
{
    width:50%;
    height:6px;
    margin:-4px auto;
    background:#f69625;
    animation: mover2 3s infinite alternate;
}


@-webkit-keyframes mover2{
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(10px);
    }
}

</style>

Leave a Reply

avatar
  Subscribe  
Notify of