Rotating Animation Doesn't Work with Chrome

Rotating css not working in chrome

You need the prefix for the Keyframes too so change your CSS to this :

@keyframes rotate
 {
 0%   {}
 100% {transform: rotate(-360deg);}
 }
@-webkit-keyframes rotate
 {
 0%   {}
 100% {-webkit-transform: rotate(-360deg);}
}

The demo http://jsfiddle.net/phk24/2/

Css Animation not working in Google Chrome

You need to include the prefixed keyframe rule for WebKit browsers as well.

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
    }
}

How to work around animated element rendered as a black square (Chrome bug)?

Another solution is to consider pseudo element to create both sides and you won't have the bug and you can easily manage each side alone.

.spinning {  animation-name: spinning;  animation-duration: 2s;  animation-iteration-count: infinite;  animation-timing-function: linear;  width: 100px;  height: 100px;  position: relative;  transform-style:preserve-3d;}.spinning:before,.spinning:after {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  backface-visibility: hidden;}.spinning:before {  background-image: radial-gradient(farthest-corner at 40% 40%, #fff, #f7f7f7 50%, #e8e8e8 75%, #d1d1d1 100%);}.spinning:after {  transform: rotateY(180deg);  background:rgba(255,0,0,0.5);}
@keyframes spinning {  0% {    transform: rotate3d(1, -1, 0, -180deg);  }  100% {    transform: rotate3d(1, -1, 0, 180deg);  }}

<div class="spinning"></div>

CSS3 animation doesn't work in Chrome while works in Firefox

Most of the syntaxes you wrote don't even exist. And -webkit-keyframes is deprecated now. Use this to run on all browsers:

.change-hue-animation {
  animation: hue 60s infinite linear;
  -webkit-animation: hue 60s infinite linear;
}

@keyframes hue {
  from { filter: hue-rotate(0deg);  -webkit-filter: hue-rotate(0deg);  }
  to   { filter: hue-rotate(-360deg);-webkit-filter: hue-rotate(-360deg); }
}

Demo: http://jsfiddle.net/790gzz83/4/

---

Related Topics