移动端提示用户点击的闪烁动画

Question

在移动端中，要制作一个提示用户点击的动画，想要实现的效果是一个圆不断的放大缩小，以引起用户的注意，起到提示用户点击的作用。类似于下图中红框内的圆，不断的放大缩小，但是我用scale结合animation写的动画总感觉不好看，有没有做过类似这样效果，还请贴个链接或说下思路。

Answer 1

没给代码，简单说下我的思路。看截图是两个圆，我个人更倾向用三个圆吧。一般动画帧就是放大+淡出，可以在dom上写个初值，然后@keyframe里直接写to就好（加from可能会有跳动感）。主要的效果点，一个是延时时机，另一个是曲线。延时上后两个延时要保持一致，这样圆间距相等才会好看，另外间距通过延时控制松紧，过紧过松都不好，这个自己调吧。曲线（timing-function）上拿不准就用线性（linear），或者也可以试试其它几个预制的，或者也可以上网搜下有些现成的cubic-bezier。我记得我第一次写翻页，就搜到一个据说是锤子手机用过的cubic-bezier，用了以后感觉效果还不错，所以你也可以试试。