Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS动画不起作用（Bounce）

1 个答案: