论悬停效果不起作用

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

您错过了动画关键帧：）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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