CSS 跨浏览器动画技巧（液体/粘糊糊的复选框动画）
Posted
技术标签:
【中文标题】CSS 跨浏览器动画技巧（液体/粘糊糊的复选框动画）【英文标题】：CSS Cross-Browser Animation Tips (Liquid / Gooey Checkbox Animation) 【发布时间】：2021-07-28 18:51:03 【问题描述】：关于这个自定义 CSS 单选按钮（下面的 sn-p 或 @https://codepen.io/Zaku/pen/xrKMgb）...
为什么 Safari 显示模糊的 CSS 元素？
这在 Chrome 中完美运行，但在 Safari 中无法正常运行...下面的演示：
这很重要，因为大多数 iPhone 和 Mac 用户默认使用 Safari 浏览器...
知道为什么会发生这种情况以及如何解决吗？
html, body
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #af4671 0%, #a45cd1 100%);
*
box-sizing: border-box;
input[type=checkbox]
display: none;
.circle
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: url('#gooey');
@keyframes circle__in
0%
transform: translate(-50%, -50%) scale(1);
16%
transform: translate(-50%, -50%) scale(0.95, 1.05);
33%
transform: translate(-50%, -50%) scale(1);
50%
transform: translate(-50%, -50%) scale(1.05, 0.95);
66%
transform: translate(-50%, -50%) scale(1);
83%
transform: translate(-50%, -50%) scale(0.98, 1.02);
100%
transform: translate(-50%, -50%) scale(1);
input:checked + .circle
transform-origin: 50% 50%;
animation-name: circle__in;
animation-duration: 750ms;
animation-timing-function: linear;
.circle
transform-origin: 50% 50%;
animation-name: circle__out;
animation-duration: 1000ms;
animation-timing-function: ease;
.circle--outer
width: 100px;
height: 100px;
border-radius: 100%;
border: 6px solid white;
.circle--inner
top: 15px;
left: 15px;
position: absolute;
width: 70px;
height: 70px;
border-radius: 100%;
background: white;
@keyframes circle--inner__in
0%
transform: scale(0.0);
80%
transform: scale(1.02);
100%
transform: scale(1);
input:checked + .circle .circle--inner
transform-origin: 50% -20%;
animation-name: circle--inner__in;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
@keyframes circle--inner__out
0%
transform: scale(1);
80%
transform: scale(0.19);
99%
transform: scale(0.21);
100%
transform: scale(0);
.circle--inner
animation-name: circle--inner__out;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
animation-fill-mode: forwards;
.circle--inner__1 transform-origin: -12% -8%;
.circle--inner__2 transform-origin: -35% 50%;
.circle--inner__3 transform-origin: 60% 130%;
.circle--inner__4 transform-origin: 112% 90%;
.circle--inner__5 transform-origin: 75% -30%;
// dribbble - twitter
.dribbble
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img
display: block;
height: 28px;
.twitter
position: fixed;
display: block;
right: 64px;
bottom: 14px;
svg
width: 32px;
height: 32px;
fill: #1da1f2;
<label>
<input type="checkbox" />
<div class="circle">
<div class="circle--inner circle--inner__1" ></div>
<div class="circle--inner circle--inner__2" ></div>
<div class="circle--inner circle--inner__3" ></div>
<div class="circle--inner circle--inner__4" ></div>
<div class="circle--inner circle--inner__5" ></div>
<div class="circle--outer" ></div>
</div>
<svg>
<defs>
<filter id="gooey">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="3"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 18 -7
"
result="gooey"
/>
<feBlend
in2="gooey"
in="SourceGraphic"
result="mix"
/>
</filter>
</defs>
</svg>
</label>
<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
<img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" />
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
<path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
</svg>
</a>【问题讨论】：
【参考方案1】：只需将<filter id="gooey"> 替换为<filter id="gooey" color-interpolation-filters="sRGB">
在除 Safari 之外的所有浏览器中，颜色插值过滤器默认设置为 sRGB。
编辑：
使用 svg 的原因是为了提供一种粘糊糊的效果，如果您仔细观察复选框，就会看到这种效果。如果在这种情况下删除它不会降低动画质量，因为变化很小。只是为了告诉你区别，当复选框从 transform:scale() 选中到 translateX() 并且还启用了 svg 时，我更改了动画，所以当它上下移动时，你会看到白色圆圈正在尝试混合外部圈子，但是当你删除 svg 时，它不会融入其中。
html,
body
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #af4671 0%, #a45cd1 100%);
*
box-sizing: border-box;
input[type=checkbox]
display: none;
body
display: flex;
justify-content: center;
align-items: center;
.circle
position: absolute;
width: 100px;
height: 100px;
filter: url('#gooey');
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@keyframes circle__in
0%
transform: translate(-50%, -50%) scale(1);
16%
transform: translate(-50%, -50%) scale(0.95, 1.05);
33%
transform: translate(-50%, -50%) scale(1);
50%
transform: translate(-50%, -50%) scale(1.05, 0.95);
66%
transform: translate(-50%, -50%) scale(1);
83%
transform: translate(-50%, -50%) scale(0.98, 1.02);
100%
transform: translate(-50%, -50%) scale(1);
input:checked+.circle
transform-origin: 50% 50%;
animation-name: circle__in;
animation-duration: 750ms;
animation-timing-function: linear;
.circle
transform-origin: 50% 50%;
animation-name: circle__out;
animation-duration: 1000ms;
animation-timing-function: ease;
.circle--outer
width: 100px;
height: 100px;
border-radius: 100%;
border: 6px solid white;
.circle--inner
top: 15px;
left: 15px;
position: absolute;
width: 70px;
height: 70px;
border-radius: 100%;
background: white;
@keyframes circle--inner__in
0%
transform: scale(1)translateX(80px);
80%
transform: scale(1)translateX(-80px);
100%
transform: scale(1)translateX(80px);
input:checked+.circle .circle--inner
transform-origin: 50% -20%;
animation-name: circle--inner__in;
animation-duration: 4s;
animation-timing-function: linear;
@keyframes circle--inner__out
0%
transform: scale(1);
80%
transform: scale(0.19);
99%
transform: scale(0.21);
100%
transform: scale(0);
.circle--inner
animation-name: circle--inner__out;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
animation-fill-mode: forwards;
.circle--inner__1
transform-origin: -12% -8%;
.circle--inner__2
transform-origin: -35% 50%;
.circle--inner__3
transform-origin: 60% 130%;
.circle--inner__4
transform-origin: 112% 90%;
.circle--inner__5
transform-origin: 75% -30%;
// dribbble - twitter
.dribbble
position: fixed;
display: block;
right: 20px;
bottom: 20px;
.twitter
position: fixed;
display: block;
right: 64px;
bottom: 14px;
svg
fill: #1da1f2;
border: 2px solid white;
label svg
height: 100vh;
width: 100vw;
<label>
<input type="checkbox" />
<div class="circle">
<div class="circle--inner circle--inner__1" ></div>
<div class="circle--inner circle--inner__2" ></div>
<div class="circle--inner circle--inner__3" ></div>
<div class="circle--inner circle--inner__4" ></div>
<div class="circle--inner circle--inner__5" ></div>
<div class="circle--outer" ></div>
</div>
<svg>
<defs>
<filter id="gooey" filterUnits="userSpaceOnUse">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="3"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 18 -7
"
result="gooey"
/>
<feBlend
in2="gooey"
in="SourceGraphic"
result="mix"
/>
</filter>
</defs>
</svg>
</label>【讨论】：
谢谢你的回答，但这似乎并没有改变 Safari 中的任何内容......它还在 Chrome 上将它们削减了一半（如在我的网站上看到的 @@surgemovement.org/map）......有什么帮助吗？ 这是您推荐的一个小技巧：jsfiddle.net/webmw/zct6rmd0/1，这是在 Safari 14 中对此进行测试的屏幕截图：i.imgur.com/XGhAuzt.png @WebMW 给我一些时间我会尝试纠正错误 @WebMW 一件事，即使您删除整个<svg id="gooey">--</svg>，代码仍然可以正常工作
@WebMW 再次查看我的代码的输出 我只是在查看输出后对其进行了编辑 从 .circle 中删除了过滤器并再次查看输出，您会看到不同之处【参考方案2】：
Safari 正在裁剪 feGaussianBlur 的输出
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4">
<filter x="-50%" y="-50%" id="gooey" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
<g filter="url(#gooey)" class="top-circles">
<circle class="top-circ" fill="#fff" cx="2" cy="2" r="2"/>
<circle class="second-circ" fill="#fff" cx="2" cy="2" r="1.6" />
</g>
</svg>
【讨论】：
你用 id="goo" 引用什么？我尝试将您指定的属性添加到过滤器的实际 id="gooey" 中，但它不会改变 Safari 中的结果。 @WebMW 已更新，抱歉.. 我通常从不回答问题，随机登陆此搜索其他内容并遇到与您相同的问题。 我刚刚看到你的codepen，safari 不能很好地添加对非svg 元素的效果。每个圆圈都像我上面那样组成一个 svg 圆圈。 我尝试将您的 SVG 添加到其中，（仍然不确定这是否是建议的解决方案）... 运气不好：jsfiddle.net/webmw/zct6rmd0/12【参考方案3】：整个 SVG 和过滤器在这段代码中甚至都不需要。
https://jsfiddle.net/webmw/zct6rmd0/8/
是否有任何理由使用带有 feGaussianBlur、feColorMatrix 或 feBlend 的 SVG 和滤镜？
这似乎是单独使用纯 CSS 动画：
<label>
<input type="checkbox" />
<div class="circle">
<div class="circle--inner circle--inner__1" ></div>
<div class="circle--inner circle--inner__2" ></div>
<div class="circle--inner circle--inner__3" ></div>
<div class="circle--inner circle--inner__4" ></div>
<div class="circle--inner circle--inner__5" ></div>
<div class="circle--outer" ></div>
</div>
</label>
欢迎使用此 CSS 动画技术扩展最佳实践的更好答案，我将奖励您 50 分。寻求最大的跨浏览器支持。
【讨论】：
【参考方案4】：添加这个标签
<filter id="gooey" filterUnits="userSpaceOnUse">
替换为
<filter id="gooey">
【讨论】：
请参阅***.com/editing-help 了解如何格式化您的帖子。而且，Ac_mmi 已经在 2 天前发布了这个。以上是关于CSS 跨浏览器动画技巧（液体/粘糊糊的复选框动画）的主要内容，如果未能解决你的问题，请参考以下文章