CSS3 过渡在 Firefox 中不起作用

Question

我试图让一个无限弹跳的箭头在 Firefox 中工作，但没有成功。我做了很多研究，并尝试了默认值和其他过渡属性，但箭头在 Firefox 中仍然不会反弹。

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

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

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

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;

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

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