Question

我试图让一个无限的弹跳箭头在Firefox中运行，但是没有去。我做了很多研究，并且我尝试过默认值和其他过渡属性，但箭头仍然没有在Firefox中反弹。

如果有人能提供任何见解，我将非常感激！谢谢！

＆＃13;

#contentArrow {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 100%;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

#contentArrow span {
  position: relative;
  top: 8px;
  left: 10px;
  content: '\203A';
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 11px;
}

#contentArrow span:before,
#contentArrow span:after {
  position: relative;
  display: block;
  background: rgb(247, 8, 215);
  width: 4px;
  height: 16px;
  content: ' ';
}

#contentArrow span:before {
  top: 5px;
  left: 4px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#contentArrow span:after {
  top: -11px;
  left: 13px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#contentArrow:hover {
  opacity: 1;
}

＆＃13;

<div class="bounce">
  <span id="contentArrow">
    <span></span>
  </span>
</div>

＆＃13;

Answer 1

当您定义属性值的更改时，将使用转换。您已定义悬停状态，但任何属性都没有变化。

你可以使用像这样的CSS3动画。

.bounce {
    -webkit-animation: bounce 1000ms linear 0s infinite alternate both;
    animation: bounce 1000ms linear 0s infinite alternate both;
}
@-webkit-keyframes bounce {
    0% {transform: translateY(-10px);-webkit-transform: translateY(-10px);}
    50% {transform: translateY(0px);-webkit-transform: translateY(0px);}
    100% {transform: translateY(10px);-webkit-transform: translateY(10px);}
}
@keyframes bounce {
    0% {transform: translateY(-10px);-webkit-transform: translateY(-10px);}
    50% {transform: translateY(0px);-webkit-transform: translateY(0px);}
    100% {transform: translateY(10px);-webkit-transform: translateY(10px);}
}

此外，您不需要使用此

content: '\203A';
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 11px;

因为您已经使用伪选择器和变换创建了箭头。 Plus content:""属性仅用于伪元素（:before and :after）。

在这里清理了一些东西。 https://jsfiddle.net/vhx8foat/

CSS3过渡在Firefox中不起作用

1 个答案: