
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>