<分区>
html - CSS hover 效果移动不流畅
正如我的标题所说，当我尝试将鼠标悬停在我的容器上时，它会立即放大，而不是从其原始大小平滑过渡。我在我的 CSS 中使用转换和过渡。
JS Fiddle 代码:https://jsfiddle.net/1kbtjaLs/
悬停效果:
.card:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
-webkit-transform: all .3s ease-in-out time;
-moz-transform: all .3s ease-in-out time;
-ms-transform: all .3s ease-in-out time;
-o-transform: all .3s ease-in-out time;
transition: all .3s ease-in-out time;
}
ease in out 似乎没有按预期运行。
最佳答案
请尝试下面的代码
CSS
.card {
width: 350px;
transition: 0.5s all ease 0s;
-webkit-transition: 0.5s all ease 0s;
-moz-transition: 0.5s all ease 0s;
-ms-transition: 0.5s all ease 0s;
}
.card:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
transition: 0.5s all ease 0s;
-webkit-transition: 0.5s all ease 0s;
-moz-transition: 0.5s all ease 0s;
-ms-transition: 0.5s all ease 0s;
}
关于html - CSS hover 效果移动不流畅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57156497/