CSS 跨浏览器动画技巧（液体/黏糊糊的复选框动画）
CSS Cross-Browser Animation Tips (Liquid / Gooey Checkbox Animation)
关于此自定义 CSS 单选按钮（下面的代码段或@ 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" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" 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>
只需将 <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>
添加这个标签
<filter id="gooey" filterUnits="userSpaceOnUse">
将其替换为
<filter id="gooey">
整个 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 个声望点。寻找最大的跨浏览器支持。
Safari 正在裁剪 feGaussianBlur 的输出
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4">
<filter x="-50%" width="200%" y="-50%" height="200%" 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>
关于此自定义 CSS 单选按钮（下面的代码段或@ 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" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" 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>
只需将 <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>
添加这个标签
<filter id="gooey" filterUnits="userSpaceOnUse">
将其替换为
<filter id="gooey">
整个 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 个声望点。寻找最大的跨浏览器支持。
Safari 正在裁剪 feGaussianBlur 的输出
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4">
<filter x="-50%" width="200%" y="-50%" height="200%" 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>