變形比例的CSS動畫在Chrome，Safari和IE中不起作用，但在FF中工作

Question

儘管有前綴，但我不知道爲什麼transform：scale在Chrome，Safari和IE中不起作用，但僅適用於Firefox。 有人可以指出如何解決這個問題？也許改變關鍵幀的寬度和高度是更好的選擇？

檢查以下線109這短短的CSS：

.icon-elements p.wizjer { 
    background: black; 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    position: absolute; 
    margin-top: 108px; 
    margin-left: 109px; 
    z-index: 97; 
    display: block; 
    border: 1px solid gray; 
    border-radius: 50%; 
-webkit-box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1); 
    box-shadow: inset 0 0 0 3px rgba(102,102,102,0.81), 0 2px 3px rgba(0,0,0,0.1); 


    -webkit-animation-name: ap-wizjer; 
    -moz-animation-name: ap-wizjer; 
    -ms-animation-name: ap-wizjer; 
    animation-name: ap-wizjer; 
    animation-duration: 7s; 

    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -ms-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 


    @-webkit-keyframes ap-wizjer { 

     0% { 

      -webkit-transform: scale(1, 1); 

      transform: scale(1, 1); 

     } 

     50% { 

      -webkit-transform: scale(1.3, 1.3); 

      transform: scale(1.3, 1.3); 

     } 

     100% { 

      -webkit-transform: scale(1, 1); 

      transform: scale(1, 1); 

     } 

    } 

jsFiddle

THX。

Answer 1

您只需爲動畫持續時間-webkit-animation-duration: 7s; 添加供應商前綴即可。希望這有助於:)