简单css动画实现心跳效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

代码部分 code.juejin.cn/pen/7142724…

<div class="container">
  <div id="app">
  </div>
  <div class="star1"></div>
  <div class="star2"></div>
  <div class="star3"></div>
  <div class="star4"></div>
</div>

代码思路：将大的爱心和几个小星星放到同一个div中，笔者本来的做法是将星星放到了红心所在的div中，这样会导致一个效果就是对红心设置的动画效果同时也会应用到小星星上面，星星会随着红心一起放大缩小，把红心的div和星星的div拆分到同一层级则不会双方的动画效果相互影响。

   body{
  background-color: #fff6f6;
}
.container{
  position: relative;
}
#app{
  background-image: url(https://img2.baidu.com/it/u=337029060,1243666823&fm=253&fmt=auto&app=138&f=JPEG?w=589&h=500);
  height: 100px;
  width: 120px;
  background-size: cover;
  animation: myAnimation 2s infinite;
  position: absolute;
}
@keyframes myAnimation {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.7;
  }
  100% {
    scale: 1;
  }
}
.star1{
  background-image: url(https://img0.baidu.com/it/u=3622138182,2393986812&fm=253&fmt=auto&app=138&f=JPEG?w=551&h=500);
  height: 12px;
  width: 12px;
  background-size: cover;
  position: absolute;
  top: 30px;
  left: 30px;
  animation: starAn 2s infinite;
}
.star2{
  background-image: url(https://img0.baidu.com/it/u=3622138182,2393986812&fm=253&fmt=auto&app=138&f=JPEG?w=551&h=500);
  height: 12px;
  width: 12px;
  background-size: cover;
  position: absolute;
  top: 35px;
  left: 75px;
  animation: starAn 2s infinite;
}
.star3{
  background-image: url(https://img0.baidu.com/it/u=3622138182,2393986812&fm=253&fmt=auto&app=138&f=JPEG?w=551&h=500);
  height: 12px;
  width: 12px;
  background-size: cover;
  position: absolute;
  top: 60px;
  left: 55px;
  animation: starAn 2s linear infinite;
}
@keyframes starAn{
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

处理各个阶段的动画：红心的动画是模拟心跳效果，所以只需要设置两个步骤的动画即可，第一个步骤是红心的缩小效果，第二个阶段是恢复原来的红心大小，这边可以设置放大也可以设置复原，都是能实现心跳的同等效果，对星星的处理是设置不同星星的位置，星星的动画效果是若隐若现的效果，所以要跟随着红心的放大缩小进行分为三个阶段，如果阶段设置的不同的话会导致俩个div的动画不统一，会有先后顺序的问题，使用scale对星星做一个若隐若现的效果，最后都对每个动画属性设置一个infinite的循环效果，红心和星星则会不停的放大缩小实现心跳的效果。