Safari的Webkit的轉變不工作

Question

我已經在努力理解爲什麼我爲我的網站圓形動畫作品完美的瀏覽器如Chrome，IE，Opera，並且Firefox，但不能爲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 { 
 
\t font-size: 50px; 
 
} 
 
.circle .desc { 
 
\t font-size: 20px; 
 
\t line-height: 29px; 
 
\t 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 { 
 
\t 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); 
 
    } 
 
\t 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); 
 
    } 
 
\t 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); 
 
    } 
 
\t 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); 
 
    } 
 
\t 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 { 
 
\t float: left; 
 
\t padding-right: 5%; 
 
} 
 
#left:after { 
 
\t border: 1px solid #2E8AE6; 
 
} 
 
#right { 
 
\t float: right; 
 
\t padding-left: 5%; 
 
} 
 
#right:after { 
 
\t 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

固定代碼：

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>

專注的 - 有沒有值：-webkit-rotate，-ms-rotate，-moz-rotate，-o-rotate。其他瀏覽器的最新版本支持非前綴屬性transform: rotate()並忽略其他，但Safari需要-webkit-transform: rotate()。