我正在使用带有velocity.js的缩放动画来将div从translate:scale(0.8, 0.8)
缩放到translate:scale(1, 1)
我尝试了多种方法让文本在第一次没有模糊时但却在铬上徘徊,但我不能让这个文字变得模糊不清......
我试图将这个规则逐个放入或合并到正在缩放的容器中:
backface-visibility: hidden;
-webkit-filter: blur(0);
transform: perspective(1px) scale(0.8, 0.8);
transform: translateZ(0) scale(0.8, 0.8);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-perspective: 1000;
这些规则都没有帮助我...它非常奇怪,因为在Firefox或IE上文字没有模糊......我不知道我能做什么..任何帮助都将不胜感激
答案 0 :(得分:3)
看起来will-change
样式规则将完成您之后的工作。
$elem = $('.section');
$elem.hover(
function() {
$elem.velocity({
scale: [1, 0.8]
}, 300, "ease-in-out");
}, function() {
$elem.velocity({
scale: [0.8]
}, 300, "ease-in-out");
});

#main {
margin:2em auto;
border:2px solid #000000;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-perspective: 1000;
-moz-osx-font-smoothing: grayscale;
}
.section {
display: flex;
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
width:300px;
height:300px;
margin:2em auto;
border:3px solid red;
text-align:center;
color:#000000;
z-index:9999;
font-size:1.2em;
/* Transform */
-webkit-transform: scale(.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-perspective: 1000;
-moz-osx-font-smoothing: grayscale;
will-change: auto;
}
.content {
display:inline-block;
padding:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<div id="main">
<div class="section">
<div class="content">
<h3 style='color:red;'>Hover me</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
</div>
&#13;