我的 CSS 过渡在 Chrome 中无法正常工作。它在 Chrome 中提供模糊效果,但在 Firefox 中工作正常。
这是 code snippet用于圆形动画。我建议在 Chrome 中以屏幕的最大宽度查看此内容。
这是 HTML:
<button>Inflate!</button>
<div class='bubble'></div>
CSS:
.bubble {
position: relative;
left: 50px;
top: 20px;
transform: scale(1);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #C00;
transition-origin: center;
transition: all 0.5s;
overflow: hidden;
}
.bubble.animate {
transform: scale(30);
}
.bubble.ani {
transform: scale(1);
}
JavaScript(jQuery):
$('button').click(function() {
$('.bubble').addClass('animate');
});
$('.buuble').click(function() {
$(this).removeClass('animate');
$(this).addClass('ani');
});
最佳答案
亲爱的 friend ,你快到了。在我的 Chrome 版本上检查了这支笔,效果非常好。
但是,我建议您在处理 CSS 过渡和转换时深入研究供应商特定的 CSS 属性。
这里有一些链接绝对适合您:
跨浏览器转换:https://css-tricks.com/almanac/properties/t/transition/
.example {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
跨浏览器转换:https://css-tricks.com/almanac/properties/t/transform/
.element {
-webkit-transform: value;
-moz-transform: value;
-ms-transform: value;
-o-transform: value;
transform: value;
}
关于jquery - CSS 过渡在 Chrome 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41470958/