对于某个属性是用哪个渲染方式我们可以打开下面这个网址来查看
这个网站就会告诉你，哪一种属性会触发哪一种流程？
网站的具体内容：
如果我们想要使用CSS来做出一个动画的效果，我们可以使用transform 和animation 这两个属性来进行操作。
transform:
比如我这个例子，使用transform的前提是你的属性有一个起点到终点的变化过程。
那我这里transform的第一个参数all 就是代表所有属性，如果你只是想实现一个高度的过渡的话，你可以将all 改为height 。
也就是属性的名字。
上面这段代码的第二个参数就是我这个过渡的总时间。
上面这段代码的实现效果如下。
注意，这里的opacity虽然最终能够让这个div 红框不见，但是这个div 可没有从文档流中被移除，它还是在那里，只不过隐形了，你看不到而已。
animation：
上面的这个transform只能做一个从起点到终点的过渡
但是如果我想实现在中途的过程中，再加上一点改变，那该咋办呢？
这里就需要用到我们的animation属性了。
我们可以设置好在什么时机，调用我这个animation属性，
然后我们还要使用@keyframes 来设置核心帧，因为动画都是由一帧一帧的画面组成的
所以我们就能在@keyframes 里设置我每一帧在进行什么操作。
0%代表最开始的时候，100%代表的自然就是最后了。
中间的那些百分比你可以随意设置，设置多少个都无所谓。
xxx 代表的就是这些关键帧的名字。
对了，上面的关键帧除了可以用百分号来设置外，还可以使用 from to
那这个的话，就是只能设置开始和终态的时候了，那肯定不如百分号的改变丰富。
号外：学习也好，做事也好，光靠想不仅学不到知识，而且会越想越乱，各种牛鬼蛇神都被幻想出来了，正确的姿势应该是，不懂我就去试，不知道写啥属性值，我就去查mdn ，查到了就再试。在不断试错的过程中，自然而然就会对知识点有深刻的了解。
但是我们的很多毛病就是，想的很多，想的很大，把问题想复杂了，想困难了，却不曾动过一次手指，试过一句代码。
但是当我每次告诉自己，我就试一下，我就写一点，而只要这个头开起来了，你就会想着不断往前推进，最终也往往超额完成。
Ever tried, ,Ever failed ,no matter
Try again ,Fail again ,Fail better
网友评论