-webkit-動畫瀏覽器兼容性

我一直在練習一些CSS通過製作一些翻轉按鈕，並使用-webkit，但我聽說-webkit只與鉻和safari兼容。所以如果我想讓動畫在其他瀏覽器上工作，我會添加哪些代碼？這裏是我的代碼：-webkit-動畫瀏覽器兼容性

HTML：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" href="main.css"> 
    <title>Rollover buttons</title> 
</head> 
<body> 
    <article> 
     <p id="button">Button!</p> 
    </article> 
</body> 
</html> 


body{ 
    text-align:center; 
} 
#button{ 
    display:block; 
    border:2px solid green; 
    margin:150px 400px; 
    background:#604085; 
    color:#ffffff; 
    width:100px; 
    height:50px; 
    -webkit-border-radius:30px; 
    -webkit-transition:background 0.5s,width 0.5s, height 0.5s; 
} 
#button:hover{ 
    background:#67e456; 
    width:110px; 
    height:60px; 
}

來源

2012-09-24 corrigan_sam

閱讀供應商前綴。 – BoltClock

transition: opacity 0.5s linear; /* vendorless fallback */ 
-o-transition: opacity 0.5s linear; /* opera */ 
-ms-transition: opacity 0.5s linear; /* IE 10 */ 
-moz-transition: opacity 0.5s linear; /* Firefox */ 
-webkit-transition: opacity 0.5s linear; /*safari and chrome */

想要閱讀供應商前綴。下面是一個帶有註釋的簡單不透明轉換示例。

看看這裏爲最新的瀏覽器支持 - http://caniuse.com/

來源

2012-09-24 15:06:00 SpaceBeers

謝謝，我會包含此代碼並查看供應商前綴。 –

如果你想保證跨瀏覽器的兼容性，最好不要在所有使用CSS3動畫在這個時候，而是使用類似jQuery效果做到這一點爲你。

來源

2012-09-24 15:02:15 PhonicUK

由於@BoltClock指出，-webkit是一個廠商前綴。但是，有限數量的support from other vendors for animation，我預計這會增加，因爲動畫是receiving attention/formalization from the W3。

請注意，transition（您的CSS顯示）和動畫（標題引用）包含一組不同的前綴和W3文檔。

來源

2012-09-24 15:07:53

您還可以使用圖像拼接爲翻車，像這樣：

.button { 
background-image: src(../images/soandso.jpg); 
background-image: top left; 
width: 45px; 
height: 15px; 
} 

.button:hover { 
background-image: src(../images/soandso.jpg); 
background-image: bottom left; 
width: 45px; 
height: 15px; 
}

那麼您可以在效果或任何你想完成使用jQuery的褪色。

來源

2012-09-24 15:12:46 Ben

-webkit-動畫瀏覽器兼容性

回答

相關問題