大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
背景
我们公司的页面上，有一个页面有一个动画效果，具体代码我就不方便贴出来，我就拿一个小例子来大体展示一下这个简单的动画效果。
图片
其实这个效果很好做，这不是问题的重点，我先贴出来这个动画的代码。
图片
支持变大变小？
产品提出了一个需求，那就是这个球要支持变大变小，我心想，那还不简单，搞两个按钮，点击设置球的宽高不就行了？
图片
但是我写出来后发现一个问题，球的宽高变大变小，他的动画出现了问题。
- 变大了，那么这个球会移动出父节点
- 变小了，那么这个球会到达不了父节点的边界
图片
其实问题很容易看出来，球的宽高变大变小了，但是动画计算的移动距离一直是calc(100% - 100px)。
图片
所以解决办法就是，当球的大小变了的时候，这个100px也得跟着改成实时的球宽才行。
但是这个100px是写在 keyframes 中啊，我要怎么去实时地去更改呢？JavaScript怎么才能跟class去联动呢？
css变量
诶！可以用css变量去做呀！我可以在球的节点上设置一个样式，这个样式是一个css常量，当我修改球宽高时，顺便也修改这个css常量，然后在 keyframes 中去使用这个css变量即可！
图片
现在球的宽高再怎么变，它都能一直保持同样的移动效果，不会达不到边界也不会超出边界了！！！
图片
