css - CSS 动画比例变换在 Firefox 中开始模糊
问题描述
(注意:这是 [确切地] 1.5年前被问到的,并且 [确切地] 零活动......我显然遇到了同样的问题,所以希望 OP @Jaffa不会介意我捎带它,并在上面打赏[希望] 引起一些兴趣!)
OP的原始问题在下面,我添加的问题和示例在下面。
[原始问题:]
我正在尝试在 SVG 上制作缩小效果的动画。我已经让它工作了,但是第一帧缩放到 30,在 Firefox 中是模糊/像素化的。
我在 Chrome 或 Edge 中没有看到同样的问题。初始帧很清晰,因为我期望它是 SVG。
html,
body {
margin: 0px;
padding: 0px;
}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.img_zoom {
width: 400px;
height: 500px;
margin: 2em auto 2em auto;
overflow: hidden;
}
.zoom {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
animation: zoom 5s ease-in-out 4s 1 normal forwards;
transform: translate(3400px, -3600px) scale(30);
}
@keyframes zoom {
to {
margin-left: 0;
transform: translate(0px, 0px) scale(0.7);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="img_zoom">
<div class="zoom"><img src="https://flexion.tech/images/box-con.svg"></div>
</div>
</div>
</body>
</html>
代码笔在这里供审查:
https://codepen.io/jaffa80/pen/KKpxgeQ
有什么想法可以解决 Firefox 中的模糊问题吗?
我遇到的另一个问题是,如果我从 @keyframe 中删除 margin-left:0 ,事情就会停止工作。对此的任何指示也将不胜感激。
编辑:
我有一个圆形 div 容器,其中包含几个元素以在圆圈内定位文本。当用户到达它时,我需要圆圈“增长”,所以我想我会使用transform:scale()
过渡或动画。
然而,只有在 Firefox中,文本是模糊的,直到过渡(或动画)完成。奇怪的是,圆圈的边界仍然非常清晰(我认为?)。
考虑到可能需要一点时间来预渲染,我尝试了setTimeout
单独延迟,以及结合事件(open
& DOMContentLoaded
)和 with requestAnimationFrame
。我也尝试使用 cssanimation
而不是transition
.
Firefox 似乎没有什么不同,但 Chrome 和 Edge 似乎还不错。是否有我不知道的前缀,或者这可能是Firefox 中的渲染错误?
我的 MCSE 是下面的片段:
setTimeout(function(){
circ.classList.remove('shrunk');
},500);
body{ font-family:'fira code'; font-size:20px; }
#circ{ position:relative; border:3px solid blue; border-radius:50%; text-align:center; white-space: nowrap; transition:transform 1000ms; }
#circ span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.shrunk{ transform:scale(0.1); }
<div class='shrunk' id='circ' style='width:336px; height:336px;'>
<span>Lorem<br>Ipsum is simply<br>dummy text of the<br>printing and typesetting<br>industry. Lorem Ipsum has<br>been the industry's<br>standard dummy text ever<br>since the 1500s, when an<br>unknown printer took a<br>galley of type and<br>scrambled it to make<br>a type specimen<br>book.</span>
</div>
有什么建议或解决方法吗?
解决方案
我只能猜测为什么会这样。Firefox 在开始动画/过渡(通过将类添加到标签)之前拍摄快照,然后在过渡结束时拍摄。也许 Firefox 正在拍摄两个以上的快照。但正如您在下面的片段中看到的,动画标签仍然是模糊的,等待动画完成;然后模糊立即消失。我认为 Firefox 进行此优化是为了获得更好的性能。
如果重置为初始CSS 属性will-change
也不能解决这个问题。
setTimeout(function() {
circ.classList.add('shrunk');
}, 2000);
body {
display: flex;
flex-flow: column;
font-family: 'fira code';
gap: 2rem;
}
.circles,
.titles {
width: 100%;
display: flex;
gap: 2rem;
}
h4 {
width: 105px;
font-size: 0.8rem;
}
#circ,
#circ2,
#circ3,
#circ4 {
width: 100px;
height: 100px;
position: relative;
border: 3px solid blue;
border-radius: 50%;
text-align: center;
word-break: break-all;
}
#circ {
transition: transform 1000ms;
transform: scale(0.1);
}
#circ2 {
animation: forwardAnim 5s linear forwards;
}
#circ3 {
animation: forwardAnim 5s linear forwards;
backface-visibility: hidden;
}
#circ4 {
animation: forwardAnim 5s linear forwards;
transform-style: preserve-3d;
}
#circ span,
#circ2 span,
#circ3 span,
#circ4 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#circ.shrunk {
transform: scale(1);
}
@keyframes forwardAnim {
0% {
transform: scale(0.1);
}
45% {
transform: scale(0.1);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="circles">
<div id="circ">
<span>This is my text!</span>
</div>
<div id="circ2">
<span>This is my text!</span>
</div>
<div id="circ3">
<span>This is my text!</span>
</div>
<div id="circ4">
<span>This is my text!</span>
</div>
</div>
<div class="titles">
<h4>Add class with transition</h4>
<h4>Animation</h4>
<h4>Animation with backface-visibility: hidden</h4>
<h4>Animation with transform-style: preserve-3d</h4>
</div>
为避免这种情况,您可以backface-visibility: hidden;
像上面提到的@nullptr那样使用,或者transform-style: preserve-3d;
* 用于更平滑的过渡。
setTimeout(function() {
circ.classList.remove('shrunk');
}, 500);
setTimeout(function() {
circ2.classList.remove('shrunk');
}, 500);
body {
display: flex;
flex-flow: column;
font-family: 'fira code';
gap: 2rem;
font-size: 0.9rem;
}
.circles,
.titles {
width: 100%;
display: flex;
gap: 2rem;
}
h4 {
width: 255px;
font-size: 0.8rem;
text-align: center;
}
#circ,
#circ2 {
width: 250px;
height: 250px;
position: relative;
border: 3px solid blue;
border-radius: 50%;
text-align: center;
white-space: nowrap;
transition: transform 1000ms;
}
#circ {
backface-visibility: hidden;
}
#circ2 {
transform-style: preserve-3d;
}
#circ span,
#circ2 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.shrunk {
transform: scale(0.1);
}
<div class="circles">
<div class="shrunk" id="circ">
<span>Lorem<br />Ipsum is simply<br />dummy text of the<br />printing and
typesetting<br />industry. Lorem Ipsum has<br />been the industry's<br />standard
dummy text ever<br />since the 1500s, when an<br />unknown printer
took a<br />galley of type and<br />scrambled it to make<br />a type
specimen<br />book.</span
>
</div>
<div class="shrunk" id="circ2">
<span
>Lorem<br />Ipsum is simply<br />dummy text of the<br />printing and
typesetting<br />industry. Lorem Ipsum has<br />been the industry's<br />standard
dummy text ever<br />since the 1500s, when an<br />unknown printer
took a<br />galley of type and<br />scrambled it to make<br />a type
specimen<br />book.</span
>
</div>
</div>
<div class="titles">
<h4>backface-visibility: hidden;</h4>
<h4>transform-style: preserve-3d;</h4>
</div>
避免圈内内容模糊的另一种方法是在position: absolute
不重要的情况下将其删除,而是将内容与display: flex
父元素对齐。
setTimeout(function() {
circ.classList.remove('shrunk');
}, 500);
body {
font-family: 'fira code';
font-size: 20px;
}
#circ {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: 3px solid blue;
border-radius: 50%;
text-align: center;
white-space: nowrap;
transition: transform 1000ms;
}
.shrunk {
transform: scale(0.1);
}
<div class="shrunk" id="circ" style="width: 336px; height: 336px">
<span>Lorem<br />Ipsum is simply<br />dummy text of the<br />printing and
typesetting<br />industry. Lorem Ipsum has<br />been the industry's<br />standard
dummy text ever<br />since the 1500s, when an<br />unknown printer took
a<br />galley of type and<br />scrambled it to make<br />a type
specimen<br />book.</span
>
</div>
推荐阅读
- javascript - babel-node:语法错误:使用 node.js 导入意外的令牌
- angular - 如何使 optgroup 可选?
- r - 在ggplot中自定义分类轴标签(允许重复标签)
- javascript - 如何打开一个而不是使用 .map() 创建的所有 div
- python - 列表索引超出范围,python中的电影推荐系统
- javascript - AppendChild 没有创建新的 Div,我的逻辑是否正确?
- sql - 我在 Postgres 左连接查询上得到重复值
- android - 如何在Android的Recyclerview的Textview中垂直显示文本?
- docusignapi - 如何通过 API 调用获取 DocuSIgn Envelope 状态报告?
- c++11 - 在编译时扩展整数序列模板参数