-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-动画浏览器兼容性

回答

相关问题