弹跳卡css动画

Question

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

请检查：

＆＃13;

＆＃13;

x <- c("one, two, three, four, five, six, seven, eight, nine")

# Split the string
y <- strsplit(x, split = ", ")[[1]]

# Know how many groups by 5
group_num <- length(y) %/% 5
# Know how many words are left
group_last <- length(y) %% 5

# Generate the output
z <- tapply(y, c(rep(1:group_num, each = 5), 
                 rep(group_num + 1, times = group_last)),
            toString)
z
                                1                                 2 
"one,  two,  three,  four,  five"     "six,  seven,  eight,  nine"

＆＃13;

    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;
    }

＆＃13;

＆＃13;

＆＃13;

1. 如果没有这样的话我怎能让它跳起来＃34;跳跃＆＃34;
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>