Question

我一直在练习一些CSS通过制作一些翻转按钮，并使用-webkit，但我听说-webkit只与chrome和safari兼容。所以，如果我想让动画在其他浏览器上运行，我会添加哪些代码？这是我的代码：

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;
}

Answer 1

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/

Answer 2

您还可以使用图像精灵进行翻转，如下所示：

.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来实现淡入效果或者你想要完成的任何事情。

Answer 3

如果你想保证跨浏览器的兼容性，那么最好不要在这个时候使用CSS3动画，而是使用类似jQuery Effects的东西为你做这个。

Answer 4

正如@BoltClock所指出的，-webkit是供应商前缀。但是，support from other vendors for animation的数量有限，我预计这会随着动画receiving attention/formalization from the W3而增加。

请注意，transition（您的CSS显示）和动画（由标题引用）包含一组不同的前缀和W3文档。

-webkit-动画浏览器兼容性

4 个答案: