CSS'transform：scale（）'屬性在iOS Safari和iOS Chrome上不起作用

我使用了我的網站的css動畫，但它在基於iOS的Safari和Chrome中不起作用。CSS'transform：scale（）'屬性在iOS Safari和iOS Chrome上不起作用

HTML：

... 
<p> 
    <a href="mywebsite.hu/something1.php"> 
     <img src="picture1.jpg" class="kep" > 
    </a> 
    <a href="mywebsite.hu/something2.php"> 
     <img src="picture2.jpg" class="kep" > 
    </a> 
    <a href="mywebsite.hu/something3.php"> 
     <img src="picture3.jpg" class="kep" > 
    </a> 
</p> 
...

CSS：

img.kep{ 
    transition: transform.1s linear; 
    -moz-transition: transform.1s linear; 
    -webkit-transition: transform.1s linear; 
} 
img.kep:hover{ 
    transform: scale(1.04); 
    -ms-transform: scale(1.04); 
    -moz-transform: scale(1.04); 
    -webkit-transform: scale(1.04); 
}

它可以在窗口（IE，Mozilla的瀏覽器，歌劇，維瓦爾第，Safari瀏覽器），機器人（瀏覽器，默認三星Galaxy瀏覽器）。但是，在iPad2與iOS 9.2.1（Safari，Chrome）不起作用！

爲什麼？

來源

2016-02-28 Barbér Máté

首先，您應該始終在列表中包含最後一個非前綴屬性。 transition和transform應低於所有前綴版本。

因此，如果它被支持，它將被用於一個潛在的老前綴版本。

其次，你只是過渡transform。所以-webkit-transform不會被改變。你可能是最好的轉換all

第三，你沒有transform和.1s之間的空間。應該是一個空間。

來源

2016-02-28 14:53:18

所以我使用這個 - > img.kep {{{0} {0}} {{0}}}}} \t -moz-transition：-moz-transform 1s linear; \t transition：-ms -trans 1s linear; \t轉換：變換1s線性; } 或這 - > img.kep { \t -webkit過渡：-webkit變換1S線性; \t -moz-transition：-moz-transform 1s linear; \t -ms-transition：-ms-transform 1s linear; \t轉換：變換1s線性; } 還是別的？ –

過渡：全1s線性; <這是你剛纔所說的簡寫。如果您不改變同一元素上的任何其他動畫屬性，那麼您就不需要動畫。 –

@BarbérMáté你明白了嗎？ –

CSS'transform：scale（）'屬性在iOS Safari和iOS Chrome上不起作用

回答

相關問題