Rotate transform not working in a media query - html

Question

I have a rotate animation that I am symbolizing that something is loading. This works great (except it doesn't rotate continuously, it kind of stops some when it has went around 360 degrees), but on some phones (I have an android note 4) it doesn't spin at all. Then on others (iphones) my circle actually rotates like it is swinging or it is fixed at one corner of the circle and it spins from that axis.
I have webkits in my code and I have the img set to this:
#spinning-circle img {
width: 100%;
height: auto;
}
Why would my image be doing these things. I can give the web url to see this live if you want to see it in a mobile setting.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width:640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 4s;
animation-iteration-count: infinite;
width: 50px;
height: 50px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#spinning-circle-title {
padding-top: 35px;
color: blue;
font-size: 1.5em;
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>

Answer 1

You need to use prefixed -webkit-transform in prefixed #webkit-keyframes and not-prefixed transform in not-prefixed #keyframes. And also you need to add prefixed -webkit-animation.
If you want animation doesn't stop at the end, you could use animation-timing-function: linear, but then animation'll have a constant speed.
You don't need to duplicate #keyframes and other properties inside #media screen {}.
#spinning-circle-container {
float: left;
width: 40%;
background: red;
padding: 140px 0 0 10%;
}
#spinning-circle {
-webkit-animation: spinning-circle linear 2s infinite;
animation: spinning-circle linear 2s infinite;
width: 100px;
height: 100px;
}
#spinning-circle img {
width: 100%;
height: auto;
}
#spinning-circle-title {
padding-top: 35px;
color: #000;
font-size: 2.8em;
}
#media screen and (max-width: 640px) {
#spinning-circle-container {
width: 80%;
padding: 40px 0 0 6%;
}
#spinning-circle {
width: 50px;
height: 50px;
}
#spinning-circle-title {
color: blue;
font-size: 1.5em;
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="spinning-circle-container">
<div id="spinning-circle">
<img src="http://optimumwebdesigns.com/images/spinning-circle.png">
</div>
<div id="spinning-circle-title">LOADING...</div>
</div>

Answer 2

You have to add animation-timing-function: linear; in your animation definition.
Here you have a code working https://jsfiddle.net/xhurpqLd/
-- EDIT --
You also have
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
}
}
You only define the transform for webkit. Change to
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg) ;
transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(360deg) ;
transform: rotate(360deg) ;
}
}
Here you have the updated code https://jsfiddle.net/xhurpqLd/3/. It works on my Android.
You can also add -ms-transform for IE support.

Answer 3

Lines 731-733 and 1391-1393 of main-style.css appear to be causing the swinging problem.
*::after, *::before {
content: '';
}
should be
*::after, *::before {
content: '';
display: table;
}
assuming you're trying to use this clearfix method