Javascript 两个值之间的Ocillate函数

我需要有一个不断增长和减少的循环，用javascript制作。 我的想法是用div和

border-radius : 50%

得到一个圆。我需要使它每[x]秒从0.2缩放到1

就像它在5秒内从0.2增长到1一样，然后在5秒内也从1下降到0.2。然后运动又开始了。 我想我必须使用sin或cos函数，但我不知道如何根据时间获得这个间隔

我需要它与javascript计时功能相结合，这样当我启动计时器时，动画就会开始，当我暂停它时，动画就会暂停

---

谢谢你的建议

您可以使用CSS3动画来实现这一点。看看这个例子，并改变它，直到它完全符合您的要求

#圆圈{
-webkit动画：无限振荡10秒；
动画：无限振荡10秒；
边框：1px纯黑；
高度：100px；
宽度：100px；
}
@-webkit关键帧振荡{
0%{边界半径：20%；}
50%{边界半径：100%；}
100%{边界半径：20%；}
}
@关键帧振荡{
0%{边界半径：20%；}
50%{边界半径：100%；}
100%{边界半径：20%；}
}

---

Hi

还有一个CSS动画示例，它可能比javascript更好：

.circle{
背景：珊瑚；
高度：100px；
宽度：100px；
边界半径：50%；
-webkit动画：脉冲1s轻松无限交替；
动画：脉冲1s轻松无限交替；
}
@-webkit关键帧脉冲{
从{
-webkit转换：规模（1）；
}
到{
-webkit变换：缩放（.2）；
}
}

---

在infinite上使用CSS3动画集。看看这个

---

我会考虑使用类和CSS动画或链接回调，这样当函数完成所有处理时，它会使用一个反向参数调用自己。我需要将它与javascript计时器链接，以便暂停/恢复动画，所以CSS only不是我想要的解决方案：/Thanway我需要它与javascript计时器链接，以便我可以暂停/恢复动画，所以CSS only不是我想要的解决方案：/Thanky您的答案，但我需要它是javascript，因为我有一个具有暂停/恢复方法的计时器

@-webkit-keyframes mymove {
  0%, 100% {    -webkit-transform: scale(1);  }
  50%  {    -webkit-transform: scale(0.2);  }
}
@keyframes mymove {
  0%, 100% {    transform: scale(1);  }
  50%  {    transform: scale(0.2);  }

}
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    border-radius:60px;
}