Circle animation

Circle animation.markdown

Circle animation

A Pen by Maciej Leszczyński on CodePen.

License.

index.html

div
div
div

style.css

body
    margin 0

$size = 220px

div
    width  $size
    height $size
    position absolute
    top  50%
    left 50%
    margin ($size / -2) 0 0 ($size / -2)
    border-radius: 50%
    mix-blend-mode multiply
    animation: 3s cubic-bezier(1, -0.02, 0.56, 0.86) infinite alternate

    &:nth-child(1)
        background-color rgb(84, 255, 255)
        animation-name rotate-1
    &:nth-child(2)
        background-color rgb(255, 115, 255)
        animation-name rotate-3
    &:nth-child(3)
        background-color rgb(255, 255, 162)
        animation-name rotate-2

$shift = 10%

@keyframes rotate-1
    0%
        transform-origin 50% - $shift
        transform rotate(0deg)
    70%, 100%
        transform-origin 50% + $shift
        transform rotate(360deg)
@keyframes rotate-2
    0%
        transform-origin 50% - $shift
        transform rotate(0deg)
    80%, 100%
        transform-origin 50% + $shift
        transform rotate(360deg)
@keyframes rotate-3
    0%
        transform-origin 50% - $shift
        transform rotate(0deg)
    100%
        transform-origin 50% + $shift
        transform rotate(360deg)