Question

有没有办法让两个箭头＆＃34;弹跳＆＃34;使用CSS在不同的方向？

我的网站上有以下代码（domainmarket.io），它产生一个弹跳箭头（可以在左上角看到），但我希望另一个箭头在另一个方向弹跳，但是无法弄清楚如何。

HTML

<div class="arrow bounce"></div>

<div class="topbarleft">
<a href="javascript:showhide('uniquename')">
<p><?php echo wp_kses_post( $ocin_topbar_text ); ?></p>
</a>

<div class="rightarrow bounceright"></div>

</div>

CSS

 @-webkit-keyframes  bounce{
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
    40% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
    60% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
    40% {
    transform: translateX(-30px);
  }
    60% {
    transform: translateX(-15px);
  }
}

@keyframes bounce{
    0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    40% {
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
    60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}





@-webkit-keyframes  bounceright {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
    40% {
    -webkit-transform: translateX(30px)!important;
    transform: translateX(30px)!important;
  }
    60% {
    -webkit-transform: translateX(15px)!important;
    transform: translateX(15px)!important;
  }
}

@-moz-keyframes bounceright {
    0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
    40% {
    transform: translateX(30px)!important;
  }
    60% {
    transform: translateX(15px)!important;
  }
}

@keyframes bounceright {
    0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    40% {
    -ms-transform: translateX(30px) !important;
    transform: translateX(30px)!important;
  }
    60% {
    -ms-transform: translateX(15px)!important;
    transform: translateX(15px)!important;
  }
}




.arrow {

  margin-top:0px;
  width: 24px;
  height: 24px;
  float: left;
  margin-right: 10px;
  background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrow-1.png');
  background-repeat: no-repeat;

}

.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}       

.bounceright {
    -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}   

.rightarrow.bounceright {
    background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrowright.png');
    background-repeat: no-repeat;
    float: left;
    width: 24px;
    height: 24px;
    display: inline-block;
}

正如您在我的CSS代码中看到的那样，我已经尝试将@keyframes改为反弹，以确定它是否有效，但它没有。

Answer 1

不知何故，您将!important添加到bounceright关键帧会禁用它们。删除它，它的工作原理。

@keyframes中标有！important的声明将被忽略。见这里：https://developer.mozilla.org/en/docs/Web/CSS/@keyframes#!important_in_a_keyframe

所以这是最终结果：

@keyframes bounceright {
    0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
    40% {
    -ms-transform: translateX(30px);
    transform: translateX(30px)
  }
    60% {
    -ms-transform: translateX(15px);
    transform: translateX(15px);
  }
}

编辑：同样，正如问题的作者解释的那样，改变＆＃34;反弹＆＃34;用＆＃34;反弹＆＃34;在.bounceright CSS规则中：

.bounceright {
  -webkit-animation: bounceright 2s infinite;
  animation: bounceright 2s infinite;
}

然而，我找到了一个更简单的解决方案：不使用另一个箭头和另一个类，而是使用相同的。所以而不是：

<div class="rightarrow bounceright"></div>

使用

<div class="reverse"><div class="arrow bounce"></div></div>

使用CSS规则：

.reverse {
  transform: rotate(180deg);
  display:inline-block;
}

这样就不会重复相同的代码只是为了反转箭头的方向。

Answer 2

弄清楚了！

在CSS文件中

.bounceright {
    -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

应该

.bounceright {
    -webkit-animation: bounceright 2s infinite;
  animation: bounceright 2s infinite;
}

使用CSS的两个单独的弹跳箭头

2 个答案: