Question

下午，有没有理由说明为什么css属性-webkit-transition: all .8s ease-in-out;没有做它应该做的事情？

浏览器是MS Edge，我的代码在下面。

由于

托德

＆＃13;

.callToActionDefault:hover {
    color: white;
    text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #0d89ca), color-stop(100%, #0d89ca));
    background: -webkit-linear-gradient(top, #0d89ca 20%, #0d89ca 100%);
    background: linear-gradient(to bottom, #0d89ca 20%, #0d89ca 100%);
}

.callToActionDefault {
    padding: 8px;
    font-size: 15px;
    margin-top: 20px;
    letter-spacing: 0.5px;
    color: white;
    width: 60%;
    display: block;
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #219cdd), color-stop(100%, #0d89ca));
    background: -webkit-linear-gradient(top, #219cdd 20%, #0d89ca 100%);
    background: linear-gradient(to bottom, #219cdd 20%, #0d89ca 100%);
    bottom: 0;
    font-weight: 700;
    -webkit-transition: all .8s ease-in-out;
}

＆＃13;

<a class="callToActionDefault" href="#">This is a button</a>

＆＃13;

Answer 1

它不起作用，因为Edge不是基于Webkit的浏览器。 -webkit-前缀是旧版基于Webkit的浏览器的一项功能，例如Google Chrome。

为了与旧版和新版浏览器实现最大兼容性，请使用以下代码：

-webkit-transition: all .8s ease-in-out;   // Old Chrome, Safari
-moz-transition: all .8s ease-in-out;      // Old Firefox
-ms-transition: all .8s ease-in-out;       // Internet Explorer
-o-transition: all .8s ease-in-out;        // Old Opera
transition: all .8s ease-in-out;           // Newer Browsers

Webkit Transition无法在Edge浏览器中运行

1 个答案: