Circular smooth

?> Background：:point_right: animation, transition, transform, animation-delay

"Transform-origin is just a syntactic sugar. In fact, you can always use translate() instead." [——James Anderson](/Aryeh Gregor)

<script v-pre type="text/x-template" id="circular-smooth_tlp"> <style> main { width: 100%; height: 529px; display: flex; flex-direction: column; align-items: center; } .path { width: 300px; height: 300px; border-radius: 50%; margin: 100px auto; position: relative; display: flex; border: 1px solid #b4a078; } .logo { width: 52px; margin: auto; background: #FFF; } .avatar { width: 50px; position: absolute; top: 124px; left: 124px; animation: circular-smooth-spin 7.5s infinite linear; animation-play-state: running; } .avatar > span { font-weight: 500; position: absolute; white-space: nowrap; top: -50%; left: 50%; padding: 3px 12px; opacity: 0; transform: scale(0); transition: opacity, transform .8s; transform-origin: 0 bottom; } .avatar > img { width: inherit; border-radius: 50%; overflow: hidden; } .path:hover .avatar { animation-play-state: paused; } .path:hover .avatar > span { opacity: 1; transform: scale(1); transition: opacity, transform .8s; } .avatar:nth-of-type(2){ animation-delay: -1.5s; } .avatar:nth-of-type(3){ animation-delay: -3s; } .avatar:nth-of-type(4){ animation-delay: -4.5s; } .avatar:nth-of-type(5){ animation-delay: -6s; } @keyframes circular-smooth-spin { from { transform: rotate(0turn) translateY(-124px) rotate(1turn) } to { opacity: 1; transform: rotate(1turn) translateY(-124px) rotate(0turn) } } </style>

Evan You

Damian Dulisz

defcc

Edd Yerburgh

Sarah Drasner

<script> </script> </script>

!> If any questions, please keep following the continued explanation.

Browser Support

<iframe width="100%" height="436px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe> <iframe width="100%" height="458px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms2d&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe> <iframe width="100%" height="458px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=css-transitions&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe>