动画在 chrome 上工作，但在 mozilla 和 safari 上不工作

Question

我有这个按钮的代码，所以当我将鼠标悬停在它上面时它会增长

.btn_pr {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease;
-webkit-transition-duration: 700ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease;
-moz-transition-duration: 700ms;
}

.btn_pr:hover {
-webkit-transform: scale(1.15,1.15);
-webkit-transition-timing-function: ease;
-webkit-transition-duration: 700ms;
-moz-transform: scale(1.15,1.15);
-moz-transition-timing-function: ease;
-moz-transition-duration: 700ms;
}

它在 chrome 上完美运行，但在 mozilla 和 safari 上没有任何作用，有人可以帮我解决我的代码有什么问题吗？

Answer 1

这行得通吗？

.btn_pr {
    border-radius: 15px;
    transition:all 700ms ease;
}
.btn_pr:hover {
    -webkit-transform:scale(1.15);
            transform:scale(1.15);
}

<button class="btn_pr">Test button</button>

这是上面 CSS 的完全前缀版本，使用 Autoprefixer 设置为最后 500 个版本创建：

.btn_pr {
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    -webkit-transition:all 700ms ease;
       -moz-transition:all 700ms ease;
         -o-transition:all 700ms ease;
            transition:all 700ms ease;
}
.btn_pr:hover {
    -webkit-transform:scale(1.15);
            -moz-transform:scale(1.15);
             -ms-transform:scale(1.15);
              -o-transform:scale(1.15);
         transform:scale(1.15);
}