前端开发跳动的心_transform+transition动画实例

学了transition和transform，总在想到底应该做一个什么样的例子来练习这两个新的知识点，无意中看到某一位博主的笔记《纯CSS3实现一颗跳动的红心》，点进去运行了一下，感觉还不错，于是想想不如用transition和transform做一颗跳动的心，费了一番心思，终于实现了效果，算是自己第一个真正意义上的实例笔记吧。

html+css制作思路：
1、两个div，使用transform的rotate和origin控制其翻转和翻转基点，
2、使用border-radius控制div的变形，
3、结合left等css样式拼接两个div，实现心形。

js思路：
1、使用外层div的样式变化来控制内部两个div的变化（我这么做的理由是：可以避免使用js单独为两个div添加className，然后在计时器里又需要做判断等等复杂操作，不如改变外层div的类名，把内部小div的样式改变交给css来做）
2、使用setTimeout控制外层div的类名变换，然后使用定时器setInterval来设置心跳的循环。

代码如下：
代码片段 1

运行可以见心形跳动正常。

有点小地方可能需要解释一下：
为什么使用setTimeout来控制外层的div的类名变化？
虽然没有太多的概念，但是我知道，某些事件或者是系统函数在执行之后会有一些内存上或者其他的某某滞留（大概的意思），所以最好能实现某一次事件行为执行之后能顺利消除，那么使用这样的逻辑：改变类名之前先把前面的setTimeout定时器取消，那么就能保证定时器不会滞留，不会累加，确保不会浪费浏览器资源。

仅仅是一次简单的尝试，如果达人看到且愿意指点一番，感激不尽{:1_472:}