弹跳卡 css 动画

Question

我正在构建一个非常简单的弹跳卡片动画，但是在某些时候动画被重置并且结果不流畅。

请检查：

    div{
      width: 110px;
      height: 50px;
      background: #EEE;
      border: 1px solid #BBB;
      border-radius: 3px;
      padding: 3px 5px;
      font-family: sans-serif;
      left: 200px;
      position: absolute;
    }
    
    @keyframes cardBouncing {
    
      20%, 60%, to {
        transform: rotate3d(0, 0, 1, 80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
      }
    
      0%, 40%, 80% {
        transform: rotate3d(0, 0, 1, 60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
      }
    }
    
    div{
      box-shadow: 3px 3px 10px grey;
      animation: 1.5s cardBouncing infinite; //flipInX;
    }

<div>HOla!</div>

1. 如何让它在没有“跳跃”的情况下弹跳
2. 这是一个拖动动画，我怎样才能在鼠标光标位置居中？似乎它在左边走得很远。有可能吗？

Answer 1

解决办法是：animation-direction: alternate-reverse;

div{
  width: 110px;
  height: 50px;
  background: #EEE;
  border: 1px solid #BBB;
  border-radius: 3px;
  padding: 3px 5px;
  font-family: sans-serif;
  position: absolute;
  left: 180px;
}

@keyframes cardBouncing {
  from {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

 to {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
}

div{
  box-shadow: 3px 3px 10px grey;
  animation: 0.4s cardBouncing infinite;
  animation-direction: alternate-reverse;
}

<div> Hola! </div>