<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="colour num1"></div> <div class="colour num2"></div> <div class="colour num3"></div> <div class="colour num4"></div> <div class="colour num5"></div><br /> <div class="colour num6"></div> <div class="colour num7"></div> <div class="colour num8"></div> <div class="colour num9"></div> <div class="colour num10"></div><br /> <div class="colour num11"></div> <div class="colour num12"></div> <div class="colour num13"></div> <div class="colour num14"></div> <div class="colour num15"></div><br /> <div class="colour num16"></div> <div class="colour num17"></div> <div class="colour num18"></div> <div class="colour num19"></div> <div class="colour num20"></div><br /> <div class="colour num21"></div> <div class="colour num22"></div> <div class="colour num23"></div> <div class="colour num24"></div> <div class="colour num25"></div><br /> <div class="colour num26"></div> <div class="colour num27"></div> <div class="colour num28"></div> <div class="colour num29"></div> <div class="colour num30"></div> </div> </div>

.colour { display: inline-block; width: 0; height: 0; margin-right: 100px; margin-bottom: 30px; border-radius: 4px; background: #4b00b5; cursor: pointer; color: transparent; -webkit-animation: fly-in 0.33s ease; animation: fly-in 0.33s ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; text-align: center; font-size: 32px; } .num1 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .num2 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .num3 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .num4 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .num5 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .num6 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .num7 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .num8 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .num9 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .num10 { -webkit-animation-delay: 1s; animation-delay: 1s; } .num11 { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .num12 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .num13 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .num14 { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .num15 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .num16 { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .num17 { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .num18 { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .num19 { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .num20 { -webkit-animation-delay: 2s; animation-delay: 2s; } .num21 { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .num22 { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; } .num23 { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; } .num24 { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .num25 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .num26 { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .num27 { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .num28 { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .num29 { -webkit-animation-delay: 2.9s; animation-delay: 2.9s; } .num30 { -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes fly-in { 100% { width: 100px; height: 60px; margin: 0; color: #fff; } } @keyframes fly-in { 100% { width: 100px; height: 60px; margin: 0; color: #fff; } }