CSS3 Transition Won't Work in Firefox

Question

I'm trying to get an infinite bouncing arrow to work in Firefox, but no go. I've done a lot of research and I've tried default values and other transition properties, but the arrow still won't bounce in Firefox.

If anyone can offer any insight, I'd greatly appreciate it! Thank you!

 #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

Transitions are used when you define a change in property values. You have a hover state defined but there is no change in any property.

You could use CSS3 animations like this.

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

Also you don't need to use this

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

since you are already creating an arrow using pseudo selectors and transforms. Plus content:"" attribute is used on pseudo elements ( :before and :after ) only.

cleaned up a few things here. https://jsfiddle.net/vhx8foat/