<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="demo" style="background: #df514c;"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="finger finger-1"> <div class="finger-item"> <span></span><i></i> </div> </div> <div class="finger finger-2"> <div class="finger-item"> <span></span><i></i> </div> </div> <div class="finger finger-3"> <div class="finger-item"> <span></span><i></i> </div> </div> <div class="finger finger-4"> <div class="finger-item"> <span></span><i></i> </div> </div> <div class="last-finger"> <div class="last-finger-item"><i></i></div> </div> </div> </div> </div> </div> </div>

.loader { width: 112px; height: 70px; position: relative; margin: 40px auto; } .loader .finger { float: left; margin: 0 2px 0 0; width: 20px; height: 100%; } .loader .finger-1 { -webkit-animation: finger-1-animation 2s infinite ease-out; animation: finger-1-animation 2s infinite ease-out; } .loader .finger-1 span { -webkit-animation: finger-1-animation-span 2s infinite ease-out; animation: finger-1-animation-span 2s infinite ease-out; } .loader .finger-1 i { -webkit-animation: finger-1-animation-i 2s infinite ease-out; animation: finger-1-animation-i 2s infinite ease-out; } .loader .finger-2 { -webkit-animation: finger-2-animation 2s infinite ease-out; animation: finger-2-animation 2s infinite ease-out; } .loader .finger-2 span { -webkit-animation: finger-2-animation-span 2s infinite ease-out; animation: finger-2-animation-span 2s infinite ease-out; } .loader .finger-2 i { -webkit-animation: finger-2-animation-i 2s infinite ease-out; animation: finger-2-animation-i 2s infinite ease-out; } .loader .finger-3 { -webkit-animation: finger-3-animation 2s infinite ease-out; animation: finger-3-animation 2s infinite ease-out; } .loader .finger-3 span { -webkit-animation: finger-3-animation-span 2s infinite ease-out; animation: finger-3-animation-span 2s infinite ease-out; } .loader .finger-3 i { -webkit-animation: finger-3-animation-i 2s infinite ease-out; animation: finger-3-animation-i 2s infinite ease-out; } .loader .finger-4 { -webkit-animation: finger-4-animation 2s infinite ease-out; animation: finger-4-animation 2s infinite ease-out; } .loader .finger-4 span { -webkit-animation: finger-4-animation-span 2s infinite ease-out; animation: finger-4-animation-span 2s infinite ease-out; } .loader .finger-4 i { -webkit-animation: finger-4-animation-i 2s infinite ease-out; animation: finger-4-animation-i 2s infinite ease-out; } .loader .finger-item { position: relative; width: 100%; height: 100%; -webkit-border-radius: 6px 6px 8px 8px; -webkit-background-clip: padding-box; -moz-border-radius: 6px 6px 8px 8px; -moz-background-clip: padding-box; border-radius: 6px 6px 8px 8px; background-clip: padding-box; background: #fff; } .loader .finger-item span { position: absolute; left: 0; top: 0; width: 100%; height: auto; padding: 5px 5px 0 5px; } .loader .finger-item span:before, .loader .finger-item span:after { content: ''; position: relative; display: block; margin: 0 0 2px 0; width: 100%; height: 2px; background: #df514c; } .loader .finger-item i { position: absolute; left: 3px; bottom: 3px; width: 14px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; background: #df514c; } .loader .last-finger { position: relative; float: left; width: 24px; height: 100%; overflow: hidden; } .loader .last-finger-item { position: absolute; right: 0; top: 32px; width: 110%; height: 20px; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; background: #fff; -webkit-animation: finger-5-animation 2s infinite linear; animation: finger-5-animation 2s infinite linear; } .loader .last-finger-item i { position: absolute; left: 0; top: -8px; width: 22px; height: 8px; background: #fff; overflow: hidden; } .loader .last-finger-item i:after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 20px; -webkit-border-radius: 0 0 15px 15px; -webkit-background-clip: padding-box; -moz-border-radius: 0 0 15px 15px; -moz-background-clip: padding-box; border-radius: 0 0 15px 15px; background-clip: padding-box; background: #df514c; } @-webkit-keyframes finger-1-animation { 0% { padding: 12px 0 5px 0; } 20% { padding: 12px 0 5px 0; } 29% { padding: 4px 0 24px 0; } 35% { padding: 4px 0 24px 0; } 41% { padding: 12px 0 5px 0; } 100% { padding: 12px 0 5px 0; } } @keyframes finger-1-animation { 0% { padding: 12px 0 5px 0; } 20% { padding: 12px 0 5px 0; } 29% { padding: 4px 0 24px 0; } 35% { padding: 4px 0 24px 0; } 41% { padding: 12px 0 5px 0; } 100% { padding: 12px 0 5px 0; } } @-webkit-keyframes finger-1-animation-span { 0% { top: 0; } 20% { top: 0; } 29% { top: -7px; } 35% { top: -7px; } 41% { top: 0; } 100% { top: 0; } } @keyframes finger-1-animation-span { 0% { top: 0; } 20% { top: 0; } 29% { top: -7px; } 35% { top: -7px; } 41% { top: 0; } 100% { top: 0; } } @-webkit-keyframes finger-1-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 20% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 29% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 35% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 41% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @keyframes finger-1-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 20% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 29% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 35% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 41% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @-webkit-keyframes finger-2-animation { 0% { padding: 6px 0 2px 0; } 24% { padding: 6px 0 2px 0; } 33% { padding: 2px 0 16px 0; } 39% { padding: 2px 0 16px 0; } 45% { padding: 6px 0 2px 0; } 100% { padding: 6px 0 2px 0; } } @keyframes finger-2-animation { 0% { padding: 6px 0 2px 0; } 24% { padding: 6px 0 2px 0; } 33% { padding: 2px 0 16px 0; } 39% { padding: 2px 0 16px 0; } 45% { padding: 6px 0 2px 0; } 100% { padding: 6px 0 2px 0; } } @-webkit-keyframes finger-2-animation-span { 0% { top: 0; } 24% { top: 0; } 33% { top: -7px; } 39% { top: -7px; } 45% { top: 0; } 100% { top: 0; } } @keyframes finger-2-animation-span { 0% { top: 0; } 24% { top: 0; } 33% { top: -7px; } 39% { top: -7px; } 45% { top: 0; } 100% { top: 0; } } @-webkit-keyframes finger-2-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 24% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 33% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 39% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 45% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @keyframes finger-2-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 24% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 33% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 39% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 45% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @-webkit-keyframes finger-3-animation { 0% { padding: 0 0 0 0; } 28% { padding: 0 0 0 0; } 37% { padding: 0 0 12px 0; } 43% { padding: 0 0 12px 0; } 49% { padding: 0 0 0 0; } 100% { padding: 0 0 0 0; } } @keyframes finger-3-animation { 0% { padding: 0 0 0 0; } 28% { padding: 0 0 0 0; } 37% { padding: 0 0 12px 0; } 43% { padding: 0 0 12px 0; } 49% { padding: 0 0 0 0; } 100% { padding: 0 0 0 0; } } @-webkit-keyframes finger-3-animation-span { 0% { top: 0; } 28% { top: 0; } 37% { top: -7px; } 43% { top: -7px; } 49% { top: 0; } 100% { top: 0; } } @keyframes finger-3-animation-span { 0% { top: 0; } 28% { top: 0; } 37% { top: -7px; } 43% { top: -7px; } 49% { top: 0; } 100% { top: 0; } } @-webkit-keyframes finger-3-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 28% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 37% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 43% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 49% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @keyframes finger-3-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 28% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 37% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 43% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 49% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @-webkit-keyframes finger-4-animation { 0% { padding: 8px 0 3px 0; } 32% { padding: 8px 0 3px 0; } 41% { padding: 4px 0 20px 0; } 47% { padding: 4px 0 20px 0; } 53% { padding: 8px 0 3px 0; } 100% { padding: 8px 0 3px 0; } } @keyframes finger-4-animation { 0% { padding: 8px 0 3px 0; } 32% { padding: 8px 0 3px 0; } 41% { padding: 4px 0 20px 0; } 47% { padding: 4px 0 20px 0; } 53% { padding: 8px 0 3px 0; } 100% { padding: 8px 0 3px 0; } } @-webkit-keyframes finger-4-animation-span { 0% { top: 0; } 32% { top: 0; } 41% { top: -7px; } 47% { top: -7px; } 53% { top: 0; } 100% { top: 0; } } @keyframes finger-4-animation-span { 0% { top: 0; } 32% { top: 0; } 41% { top: -7px; } 47% { top: -7px; } 53% { top: 0; } 100% { top: 0; } } @-webkit-keyframes finger-4-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 32% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 41% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 47% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 53% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @keyframes finger-4-animation-i { 0% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 32% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 41% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 47% { bottom: 8px; height: 12px; -webkit-border-radius: 7px 7px 4px 4px; -webkit-background-clip: padding-box; -moz-border-radius: 7px 7px 4px 4px; -moz-background-clip: padding-box; border-radius: 7px 7px 4px 4px; background-clip: padding-box; } 53% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } 100% { bottom: 3px; height: 14px; -webkit-border-radius: 10px 10px 7px 7px; -webkit-background-clip: padding-box; -moz-border-radius: 10px 10px 7px 7px; -moz-background-clip: padding-box; border-radius: 10px 10px 7px 7px; background-clip: padding-box; } } @-webkit-keyframes finger-5-animation { 0% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 34% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 43% { top: 20px; right: 2px; -webkit-border-radius: 0 8px 20px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 8px 20px 0; -moz-background-clip: padding-box; border-radius: 0 8px 20px 0; background-clip: padding-box; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 50% { top: 20px; right: 2px; -webkit-border-radius: 0 8px 20px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 8px 20px 0; -moz-background-clip: padding-box; border-radius: 0 8px 20px 0; background-clip: padding-box; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 60% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes finger-5-animation { 0% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 34% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 43% { top: 20px; right: 2px; -webkit-border-radius: 0 8px 20px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 8px 20px 0; -moz-background-clip: padding-box; border-radius: 0 8px 20px 0; background-clip: padding-box; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 50% { top: 20px; right: 2px; -webkit-border-radius: 0 8px 20px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 8px 20px 0; -moz-background-clip: padding-box; border-radius: 0 8px 20px 0; background-clip: padding-box; -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 60% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { top: 32px; right: 0; -webkit-border-radius: 0 5px 14px 0; -webkit-background-clip: padding-box; -moz-border-radius: 0 5px 14px 0; -moz-background-clip: padding-box; border-radius: 0 5px 14px 0; background-clip: padding-box; -webkit-transform: rotate(0deg); transform: rotate(0deg); } }