Payament
Free Photos
WordPress Themes

Uber Rider Animation

HTML
<div class="c"> <div class="center"> <div class="r r1"></div> <div class="r r2"></div> <div class="r r3"></div> <div class="r r4"></div> <div class="r r5"></div> </div> </div>
LESS
body { margin: 0; padding: 0; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; } body:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url('http://ridesharehero.com/wp-content/uploads/2016/05/uber.png'); background-size: cover; opacity: .1; } @r: 30px; @color: #179cbb; @duration: 2s; .c { position: relative; transform: rotate(-90deg); .center { width: @r; height: @r; background-color: @color; border-radius: 100%; position: relative; &:after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 100%; background-color: @color; animation: center @duration infinite; } } .r { width: @r/3; height: @r/3; background-color: @color; position: absolute; border-radius: 100%; top: @r/3; left: @r/3; animation: rotate @duration infinite; } // TODO :P //write a loop instead .r1 { animation-timing-function: cubic-bezier(.1, .0, .0, 0.9); } .r2 { animation-timing-function: cubic-bezier(.1, .1, .8, 0.9); } .r3 { animation-timing-function: cubic-bezier(.1, .2, .7, 0.9); } .r4 { animation-timing-function: cubic-bezier(.1, .3, .6, 0.9); } .r5 { animation-timing-function: cubic-bezier(.1, .4, .5, 0.9); } } @keyframes center { to { transform: scale(3); opacity: 0; } } @keyframes rotate { 0% { transform: rotate(0deg) translateX(600%) rotate(-0deg); } 2% { transform: rotate(0deg) translateX(600%) rotate(-0deg); } 98% { transform: rotate(360deg) translateX(600%) rotate(-360deg); } 100% { transform: rotate(360deg) translateX(600%) rotate(-360deg); } }
JAVASCRIPT
Expand for more options Login