html - CSS 动画不工作(弹跳)

Question

我想知道为什么我的弹跳动画在 JSFiddle 中不起作用但在我的开发网站上工作。请检查这个有什么问题。在我的开发站点中，箭头会弹跳但不会像我的 CSS 类中所说的那样旋转。

.active.ongoing::before {
    content: "\f175";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #56a4da;
    font-size: 28px;
    padding-right: 0.5em;
    position: absolute;
    top: 31px;
    transform: rotate(41deg);
    animation: bounce 2s infinite;
    -moz-animation:bounce 2s infinite;
    -ms-animation:bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<div class="active ongoing">
</div>

Answer 1

此动画可能基于 animate.css，它可能包含在您的开发站点中，您没有在 jsfiddle 中包含或指定关键帧

所以你可以将它添加到你的 css 中，它会起作用

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}