反弹卡片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>