Safari Webkit Transitions don't work - html

Question

I have struggling to understand why my circle animation for my website works perfectly for browsers such as Chrome, IE, Opera, and Firefox, but fails to work for Safari.
JSFiddle
Website
.circle {
width: 45%;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 40px;
margin-top: -20px;
text-align: center;
}
.circle div span {
font-size: 50px;
}
.circle .desc {
font-size: 20px;
line-height: 29px;
text-align: center;
}
#left:hover {
animation: sway 2s infinite ease-in-out;
-webkit-animation: sway 2s infinite ease-in-out;
-moz-animation: sway 2s infinite ease-in-out;
-o-animation: sway 2s infinite ease-in-out;
}
#right:hover {
animation: swayClock 2s infinite ease-in-out;
-webkit-animation: swayClock 2s infinite ease-in-out;
-moz-animation: swayClock 2s infinite ease-in-out;
-o-animation: swayClock 2s infinite ease-in-out;
}
#keyframes sway {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(-360deg);
-webkit-transform: -webkit-rotate(-360deg);
-ms-transform: -ms-rotate(-360deg);
-moz-transform: -moz-rotate(-360deg);
-o-transform: -o-rotate(-360deg);
}
}
#-webkit-keyframes sway {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(-360deg);
-webkit-transform: -webkit-rotate(-360deg);
-ms-transform: -ms-rotate(-360deg);
-moz-transform: -moz-rotate(-360deg);
-o-transform: -o-rotate(-360deg);
}
}
#keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(360deg);
-webkit-transform: -webkit-rotate(360deg);
-ms-transform: -ms-rotate(360deg);
-moz-transform: -moz-rotate(360deg);
-o-transform: -o-rotate(360deg);}
}
#-webkit-keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% { transform: rotate(360deg);
-webkit-transform: -webkit-rotate(360deg);
-ms-transform: -ms-rotate(360deg);
-moz-transform: -moz-rotate(360deg);
-o-transform: -o-rotate(360deg);}
}
#left {
float: left;
padding-right: 5%;
}
#left:after {
border: 1px solid #2E8AE6;
}
#right {
float: right;
padding-left: 5%;
}
#right:after {
border: 1px solid #FF9900;
}
<div class="circle" id="left"><div><span>Coding</span><br><p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web development</i>.</p></div></div>
<div class="circle" id="right"><div><span>Design</span><p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful functionality</i></p></div></div>

Answer 1

Fixed your code:
JSFiddle
.circle {
width: 45%;
}
.circle:after {
content: '';
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.circle div {
float: left;
width: 100%;
padding-top: 50%;
line-height: 40px;
margin-top: -20px;
text-align: center;
}
.circle div span {
font-size: 50px;
}
.circle .desc {
font-size: 20px;
line-height: 29px;
text-align: center;
}
#left:hover {
-webkit-animation: sway 2s infinite ease-in-out;
-moz-animation: sway 2s infinite ease-in-out;
-o-animation: sway 2s infinite ease-in-out;
animation: sway 2s infinite ease-in-out;
}
#right:hover {
animation: swayClock 2s infinite ease-in-out;
-webkit-animation: swayClock 2s infinite ease-in-out;
-moz-animation: swayClock 2s infinite ease-in-out;
-o-animation: swayClock 2s infinite ease-in-out;
}
#keyframes sway {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#-webkit-keyframes sway {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes swayClock {
0% {
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#left {
float: left;
padding-right: 5%;
}
#left:after {
border: 1px solid #2E8AE6;
}
#right {
float: right;
padding-left: 5%;
}
#right:after {
border: 1px solid #FF9900;
}
<div class="circle" id="left">
<div>
<span>Coding</span>
<p class="desc">I am a strong programmer in <i>Python</i>, <i>Java</i>, <i>Processing</i>, and <i>front-end web
development</i>.
</p>
</div>
</div>
<div class="circle" id="right">
<div>
<span>Design</span>
<p class="desc">I have experience in designing <i>sleek</i>, <i>responsive</i> layouts with <i>powerful
functionality</i>
</p>
</div>
</div>
Be attentive — there no values: -webkit-rotate, -ms-rotate, -moz-rotate, -o-rotate. The latest versions of other browsers support non-prefixed property transform: rotate() and ignore others, but -webkit-transform: rotate() is needed for Safari.