常用动画效果

1.翻转：关键是加 perspective，有3d的翻转效果

.compose-img{
  width: 220px;
  height: 330px;
  margin: 10px auto;
  animation: miss 1.3s ease;
}
@keyframes miss {
  from{}
  to{transform: perspective(600px) rotateY(360deg)  scale(1.2);}
}

2.放大：使用position实现更好

.shunk{
  animation: print 1s 1 ease-in-out;
}
@keyframes print {
  0% {
    position: relative;
    transform: scale(1);
  }
  100%{
    position: absolute;
    left: 0;
    right: 0;
    transform: scale(10);
  }
}

3.缩小：

.scale{
  animation: print 1s 1 ease-in-out;
}
@keyframes print {
  0% {
    position: absolute;
    transform: scale(10);
  }
  100%{
    position: relative;
  }
}

4.左右摇晃：选中中心点，保持中心点不动

.shake-reward {
  animation: music-move 500ms 500ms infinite alternate ease-in-out;
}

@keyframes music-move {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
  25% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    transform-origin: 50% 100%;
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
  75% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
}