Webkit Transition 在 Edge 浏览器中不起作用

debugcn 发表于 Dev

用户8709679

下午，是否有理由说明为什么 css 属性-webkit-transition: all .8s ease-in-out;没有按预期执行？

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

谢谢

托德

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

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

天使政治家

它不起作用，因为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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。