(楕円)円運動っぽいアニメーションの実装

目的

divが円運動するようなアニメーションを作る．

下のgifはカクついていますが，実際のアニメーションは一応ぬるぬる動きます．

アイデア

• ease-in-out はsin関数のような挙動をする((実際にはcubic-bezier(0.42, 0.0, 0.58, 1.0)なのでsinでは無い))．
• translateX，translateY を ease-in-out でアニメーションさせれば良さそう．
• 1つの要素に対して複数のアニメーションを同時に適応させる事は出来るが，重複した属性を同時に適応させる事は出来ない．transform: translateX(100px); が指定されたアニメーションとtransform: translateY(100px); が指定されたアニメーションを同時に適応すると，どちらか片方の挙動をする．
• 下の実装では，親要素と子要素にアニメーションを分割させ，X移動とY移動のアニメーションを同時に適応している．

実装

html

<div class="anim2">
<div class="anim1">
</div>
</div>

css

.anim2{
    margin: 100px 0px;
    animation:
        'anim_y' 0.5s ease-in-out -0.00s infinite normal forwards running;
}
.anim1{
    background: radial-gradient(#7aff, #07f0);
    border-radius: 20px;
    height: 40px; width: 40px;
    margin: 0px 100px;
    animation:
        'anim_x' 0.5s ease-in-out -0.125s infinite normal forwards running;
}

@keyframes anim_x{
    0%,100%{
        transform: translateX(100px);
    }
    50%{
        transform: translateX(-100px);
    }
}
@keyframes anim_y{
    0%,100%{
        transform: translateY(-100px);
    }
    50%{
        transform: translateY(100px);
    }
}

楕円

'anim_x' 0.5s ease-in-out -0.125s を animation: 'anim_x' 0.5s ease-in-out -0.1s に書き換えます．

codepen.io

参考URL

developer.mozilla.org