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

我的神
  • 957

效果动画

想知道它 时间节点 是怎么算出来的?得到规律能否把它应用到任意大小的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);}
}
回复
阅读 1.2k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏