CSS 跨浏览器动画技巧（液体/粘糊糊的复选框动画）

Question

关于这个自定义 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" 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>

Answer 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>

Answer 2

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>

Answer 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 分。寻求最大的跨浏览器支持。

Answer 4

添加这个标签

<filter id="gooey" filterUnits="userSpaceOnUse">

替换为

<filter id="gooey">