发现一个非常有趣的css 效果，它的@keyframes时间比是怎么得出来的？

Question

效果动画

想知道它 时间节点 是怎么算出来的？得到规律能否把它应用到任意大小的div上？

@keyframes atom {
    0% {transform: translateX(0) rotate(0);}
    30%{transform: translateX(var(--tr-X)) rotate(0);}
    50% {transform: translateX(var(--tr-X)) rotate(180deg);}
    80% {transform: translateX(0) rotate(180deg);}
    100% {transform: translateX(0) rotate(360deg);}
}

Answer 1

你在animate中调用它的时候给了时间，这个百分比就是那个时间的百分比，从0%-30%-50%-80%-100%-0%...循环