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; 

，因爲使用的是僞選擇和轉換已創建一個箭頭。 Plus content:""屬性僅用於僞元素（:before and :after）。

在這裏清理了一些東西。 https://jsfiddle.net/vhx8foat/