Two Separate Bouncing Arrows Using CSS - html

Question

Is there a way to have two arrows "bouncing" in separate directions using CSS?
I have the following code on my site (domainmarket.io), which produces one bouncing arrow (which can be seen on the top left-hand corner), but I would like another arrow bouncing in another direction, but can't figure out how.
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;
}
As you can see in my CSS code, I've tried to change the #keyframes to bounceright to see if that would work, but it hasn't.

Answer 1

Got it figured out!
In the CSS file
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
SHOULD BE
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}

Answer 2

Somehow, you adding !important to the bounceright keyframes disabled them. Remove it and it works.
Declarations in #keyframes that are marked with !important are ignored. See here: https://developer.mozilla.org/en/docs/Web/CSS/#keyframes#!important_in_a_keyframe
So here is the end result:
#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);
}
}
Edit: also, as the author of the question explained, change "bounce" with "bounceright" in the .bounceright CSS rule:
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
However, I found a much simpler solution to all of this: instead of using another arrow and another class, just use the same. So instead of:
<div class="rightarrow bounceright"></div>
use
<div class="reverse"><div class="arrow bounce"></div></div>
with the CSS rule:
.reverse {
transform: rotate(180deg);
display:inline-block;
}
This way there is no duplication of the same code just to reverse the direction of the arrow.