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

动画工作在铬，但没有在mozilla和野生动物园

1 个答案: