"Indonesia Flag Animation - Pojokan Blitar"
Bootstrap 4.1.1 Snippet by pojokanblitar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="container"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <!--100 times <li> copys--> </ul> </div> <script type="text/javascript"> </script> </body> </html>
body { margin:0; padding:0; background: #232; } ul { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(-20deg) skew(20deg); margin:0; padding:0; display: flex; } ul img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; z-index: 1; animation: rotate 20s linear infinite; } @keyframes rotate { 0% { transform: translate(-50%,-50%) rotate(0deg) scale(0.8); } 100% { transform: translate(-50%,-50%) rotate(360deg) scale(0.8); } } ul li { position: relative; list-style:none; width: 4px; height: 220px; border-radius: 2px; box-shadow: -1px 0 2px rgba(0,0,0,.2); overflow: hidden; animation: animate 9.5s linear infinite; } ul li:nth-child(20n+1) { animation-delay: -0s; } ul li:nth-child(20n+2) { animation-delay: -0.5s; } ul li:nth-child(20n+3) { animation-delay: -1s; } ul li:nth-child(20n+4) { animation-delay: -1.5s; } ul li:nth-child(20n+5) { animation-delay: -2s; } ul li:nth-child(20n+6) { animation-delay: -2.5s; } ul li:nth-child(20n+7) { animation-delay: -3s; } ul li:nth-child(20n+8) { animation-delay: -3.5s; } ul li:nth-child(20n+9) { animation-delay: -4s; } ul li:nth-child(20n+10) { animation-delay: -4.5s; } ul li:nth-child(20n+11) { animation-delay: -5s; } ul li:nth-child(20n+12) { animation-delay: -5.5s; } ul li:nth-child(20n+13) { animation-delay: -6s; } ul li:nth-child(20n+14) { animation-delay: -6.5s; } ul li:nth-child(20n+15) { animation-delay: -7s; } ul li:nth-child(20n+16) { animation-delay: -7.5s; } ul li:nth-child(20n+17) { animation-delay: -8s; } ul li:nth-child(20n+18) { animation-delay: -8.5s; } ul li:nth-child(20n+19) { animation-delay: -9s; } ul li:nth-child(20n+20) { animation-delay: -9.5s; } ul li:before { content:''; position: absolute; top:0; left:0; width: 100%; height: 110px; background: #dc3545; } ul li:after { content:''; position: absolute; bottom:0; left:0; width: 100%; height: 110px; background: #fff; } @keyframes animate { 0% { transform: translateY(0); } 25% { transform: translateY(5px); } 50% { transform: translateY(0); } 75% { transform: translateY(-5px); } 100% { transform: translateY(0); } }

Related: See More

Argon Design System
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: