懸停效果不工作

Question

我想實現我的錨標記垂直襬動的效果，一個例子可以在這裏找到：

http://ianlunn.github.io/Hover/

我這是我的標記：

.hvr-wobble-vertical { 
     display: inline-block; 
     vertical-align: middle; 
     -webkit-transform: translateZ(0); 
     transform: translateZ(0); 
     box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
     -webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
     -moz-osx-font-smoothing: grayscale; 
    } 

<div class="col-lg-2 col-md-4 col-sm-6"> 
      <div class="pin"> 
       <a href="#" class="hvr-wobble-vertical"> 
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png"/></a> 
       <p style="text-align: center;"> 
        some clever text. 
       </p> 
      </div> 
</div> 

我目前沒有得到任何結果...有人可以給我一些我可能會失蹤的指針嗎？

Answer 1

你錯過的動畫關鍵幀:)

.hvr-wobble-vertical { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
.hvr-wobble-vertical:hover, 
 
.hvr-wobble-vertical:focus, 
 
.hvr-wobble-vertical:active { 
 
    -webkit-animation-name: hvr-wobble-vertical; 
 
    animation-name: hvr-wobble-vertical; 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    animation-timing-function: ease-in-out; 
 
    -webkit-animation-iteration-count: 1; 
 
    animation-iteration-count: 1; 
 
} 
 

 
/* Wobble Vertical */ 
 

 
@-webkit-keyframes hvr-wobble-vertical { 
 
    16.65% { 
 
    -webkit-transform: translateY(8px); 
 
    transform: translateY(8px); 
 
    } 
 
    33.3% { 
 
    -webkit-transform: translateY(-6px); 
 
    transform: translateY(-6px); 
 
    } 
 
    49.95% { 
 
    -webkit-transform: translateY(4px); 
 
    transform: translateY(4px); 
 
    } 
 
    66.6% { 
 
    -webkit-transform: translateY(-2px); 
 
    transform: translateY(-2px); 
 
    } 
 
    83.25% { 
 
    -webkit-transform: translateY(1px); 
 
    transform: translateY(1px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
    } 
 
} 
 
@keyframes hvr-wobble-vertical { 
 
    16.65% { 
 
    -webkit-transform: translateY(8px); 
 
    transform: translateY(8px); 
 
    } 
 
    33.3% { 
 
    -webkit-transform: translateY(-6px); 
 
    transform: translateY(-6px); 
 
    } 
 
    49.95% { 
 
    -webkit-transform: translateY(4px); 
 
    transform: translateY(4px); 
 
    } 
 
    66.6% { 
 
    -webkit-transform: translateY(-2px); 
 
    transform: translateY(-2px); 
 
    } 
 
    83.25% { 
 
    -webkit-transform: translateY(1px); 
 
    transform: translateY(1px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    transform: translateY(0); 
 
    } 
 
}

<div class="col-lg-2 col-md-4 col-sm-6"> 
 
    <div class="pin"> 
 
    <a href="#" class="hvr-wobble-vertical"> 
 
     <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /> 
 
    </a> 
 
    <p style="text-align: center;"> 
 
     some clever text. 
 
    </p> 
 
    </div> 
 
</div>

http://ianlunn.github.io/Hover/

https://github.com/IanLunn/Hover/blob/master/css/hover.css