CSS3 Animation isn't work on chrome

Question

I have my CSS3 animation that work fine on Firefox, but do not show up on Chrome browser. you can see the final result on www.stamp4all.com the animation is the Arrows rotating.

Here is the CSS code:

/* Some stylesheet reset */
#sidemenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;

}
/* The container */
#sidemenu > ul {
  display: block;
  position: relative;
  width: 133px;
  /* The list elements which contain the links */

}
#sidemenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* General link styling */
#sidemenu > ul li a {
  /* Layout */

  display: block;
  position: relative;
  margin: 0;
  border-top: 0.14em dotted #3a3a3a;
  border-bottom: 0.14em dotted #1b1b1b;
  padding: 12px 15px;
  /* Typography */

  font-family: Helvetica, Arial, sans-serif;
  color: #d8d8d8;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  font-size: 15px;
  font-weight: 300;
  /* Background & effects */

  background: #282828;   /*  !!! animated menue background !!!! */
}

#sidemenu > ul li > a {
    border-radius:10px;
}


/* The hover state of the menu/submenu links */
#sidemenu > ul li > a:hover,
#sidemenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: #52cef0;
  background: -webkit-linear-gradient(#70d5f1, #52cef0);
  background: -moz-linear-gradient(#70d5f1, #52cef0);
  background: linear-gradient(#70d5f1, #52cef0);
  border-color: transparent;
}
/* The arrow indicating a submenu */
#sidemenu > ul .has-sub > a::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 120px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

  border: 5px solid transparent;
  border-right: 5px solid #d8d8d8;

    /* effect, rotate 720 the arrows */
  -webkit-transition: transform 1.5s;
  -moz-transition: transform 1.5s;
  transition: transform 1.5s;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#sidemenu > ul .has-sub > a::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 120px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

  border: 6px solid transparent;
  border-right: 6px solid #000;

    /* effect, rotate 720 the arrows */
  -webkit-transition: transform 1.5s;
  -moz-transition: transform 1.5s;
  transition: transform 1.5s;
}
/* Changing the color of the arrow on hover */
#sidemenu > ul li > a:hover::after,
#sidemenu > ul li:hover > a::after {
  border-right: 4px solid #ffffff;
  transform: rotate(720deg);
}
#sidemenu > ul li > a:hover::before,
#sidemenu > ul li:hover > a::before {
  border-right: 4px solid rgba(0, 0, 0, 0.3);
  transform: rotate(720deg);
}
/* THE SUBMENUS */
#sidemenu > ul ul {
  position: absolute;
  right: 100%;
  top: -9999px;
  padding-right: 3px;
  opacity: 0;
  width: 0px;
  /* The fade effect, created using an opacity transition */

  -webkit-transition: opacity 1.3s, width 1s, transform 0.7s;
  -moz-transition: opacity  1.3s, width 1s, transform 0.7s;
  transition: opacity  1.3s, width 1s, transform 0.7s;

}
/* Showing the submenu when the user is hovering the parent link */
#sidemenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  width: 110px;
}

And the HTML code:

<div id="sidemenu">
<ul> 
    <li><a href="index.php?main=include/about_us.html" >אודות</a></li> 
    <li class='has-sub'><a href="index.php?main=products" >חותמת מלבנית</a>
        <ul>
            <li><a href="index.php?main=products/rectangle/p20.html" >P20 - 14X38מ"מ</a></li>
            <li><a href="index.php?main=products/rectangle/p30.html" >P30 - 18X47מ"מ</a></li>
            <li><a href="index.php?main=products/rectangle/p40.html" >P40 - 23X59מ"מ</a></li>
            <li><a href="index.php?main=products/rectangle/p45.html" >P45 - 25X82מ"מ</a></li>
            <li><a href="index.php?main=products/rectangle/p50.html" >P50 - 30X69מ"מ</a></li>
            <li><a href="index.php?main=products/rectangle/p60.html" >P60 - 37X76מ"מ</a></li>
        </ul>
    </li>
    <li class='has-sub'><a href="#" >חותמת מרובעת</a>
        <ul>
            <li><a href="#" >Q30 - 14X38mm</a></li>
            <li><a href="#" >Q43 - 18X47mm</a></li>
        </ul>
    </li> 
    <li class='has-sub'><a href="#" >חותמת עגולה</a>
        <ul>
            <li><a href="#" >R12 - 14X38mm</a></li>
            <li><a href="#" >R17 - 18X47mm</a></li>
            <li><a href="#" >R24 - 18X47mm</a></li>
            <li><a href="#" >R40 - 18X47mm</a></li>
            <li><a href="#" >R50 - 18X47mm</a></li>
        </ul>
    </li> 
    <li class='has-sub'><a href="#" >חותמת תאריך</a>
        <ul>
            <li><a href="#" >S120 - 14X38mm</a></li>
            <li><a href="#" >S160 - 18X47mm</a></li>
            <li><a href="#" >S360 - 18X47mm</a></li>
            <li><a href="#" >S660 - 18X47mm</a></li>
        </ul>
    </li> 
    <li><a href="index.php?main=contuct_us" >צור קשר</a></li> 
</ul> 
</div>

Why is it not rotating in chrome?

Answer 1

As Leo reply, I use this code in order to fix the rotate arrows also in chrome browser:

  -webkit-transition:-webkit-transform 1.5s;
  -moz-transition:-moz-transform 1.5s;
  -o-transition:-o-transform 1.5s;
  transition:transform 1.5s;
  display:inline-block;

Thanks for all answers.

Answer 2

Clear your chrome cache memory and previous browsing details

I give one sample

-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;

/* Chrome, Safari, Opera */

-webkit-animation:myfirst 5s linear 2s infinite alternate; 
animation:myfirst 5s linear 2s infinite alternate;

Css tutorial for animation

Answer 3

Try using

-webkit-transition:-webkit-transform 1.5s;