Note that there are some explanatory texts on larger screens.

plurals
  1. POcss3 animation rotation stutter
    primarykey
    data
    text
    <p>I have a css3 animation, it's a rotation set on an infinite loop, the problem is once it's done a rotation it doesn't smoothly go into the rotation again, there is a stutter of some sort and I can't quite figure out why.</p> <p>This is the css for it, and you can see it in action here: <a href="http://www.klossal.com/sixred/discovery/groundup.html" rel="nofollow">http://www.klossal.com/sixred/discovery/groundup.html</a></p> <p>HTML:</p> <pre><code>&lt;div class="back_rays-container"&gt; &lt;img class="back-rays" src="images/start-imgs/back-rays.png" /&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>@-ms-keyframes backRays { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } @-moz-keyframes backRays { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes backRays { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(100deg) } } @keyframes backRays { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .back_rays-container { position:absolute; z-index:33; top:50%; left:50%; -webkit-animation-name: backRays; -webkit-animation-duration: 9000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: backRays; -moz-animation-duration: 9000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: backRays; -ms-animation-duration:9000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; } .back-rays { height:100%; width:100%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload