Firefox 上的动画不起作用（仅限 CSS）

【问题标题】：Animation on firefox doesn't work (css only)Firefox 上的动画不起作用（仅限 CSS）
【发布时间】：2019-02-17 23:55:33
【问题描述】：

我想弄清楚为什么 codepen 上的这个动画不起作用

https://codepen.io/cassie-codes/full/zWJxXj/

您可以在其中找到包含 2 张图片的气泡动画。一个是背景，第二个是蒙版。这些随机气泡应该移动并显示蒙版图像。在 chrome 上工作，在 firefox 上不行。我不明白问题是关于 svg 属性还是关于 css 的东西。反正就是代码

HTML：

<div class="bgImage"></div>
<svg class="blobCont">
        <image xlink:href="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
            <mask id="mask" x="0" y="0">
                <g style="filter: url(#gooey)">
          <circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
                    <circle class="blob" cx="50%" cy="10%" r="40" fill="white" stroke="white"/>
                    <circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
                    <circle class="blob" cx="90%" cy="20%" r="120" fill="white" stroke="white"/>
                    <circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
          <circle class="blob" cx="50%" cy="60%" r="80" fill="white" stroke="white"/>
                    <circle class="blob" cx="70%" cy="90%" r="10" fill="white" stroke="white"/>
                    <circle class="blob" cx="90%" cy="60%" r="90" fill="white" stroke="white"/>
                    <circle class="blob" cx="30%" cy="90%" r="80" fill="white" stroke="white"/>
          <circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
                    <circle class="blob" cx="50%" cy="10%" r="20" fill="white" stroke="white"/>
                    <circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
                    <circle class="blob" cx="40%" cy="20%" r="120" fill="white" stroke="white"/>
                    <circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
          <circle class="blob" cx="80%" cy="60%" r="80" fill="white" stroke="white"/>
                    <circle class="blob" cx="17%" cy="10%" r="100" fill="white" stroke="white"/>
                    <circle class="blob" cx="40%" cy="60%" r="90" fill="white" stroke="white"/>
                    <circle class="blob" cx="10%" cy="50%" r="80" fill="white" stroke="white"/>
                </g>
            </mask>
            <filter id="gooey" height="130%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" 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 18 -7" result="goo" />
        </filter>
    </svg>

scss:

body , .bgImage {
 margin: 0;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

.bgImage {
  position: absolute;
 background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
background-size: cover;
background-position: top;
  -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
    filter: grayscale(70%);
  z-index: -1;
}

.blobCont {
    position: absolute;
    width: 100vw;
    height: 100vh;
}




@for $i from 1 through 18 {
   $a : #{$i*90};
   $b : #{$i*90+360}; 

  .blob:nth-child(#{$i}) {
      animation: move#{$i} 20s infinite linear;
  }

  @keyframes move#{$i} {
    from {
      transform:rotate(#{$a}deg) translate( 200px ,0.1px) rotate(-#{$a}deg);
    }
    to {
      transform:rotate(#{$b}deg) translate( 200px ,0.1px) rotate(-#{$b}deg);
    }
  }

  }

如果需要，从 scss 编译的 css

body, .bgImage {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bgImage {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
  background-size: cover;
  background-position: top;
  -webkit-filter: grayscale(70%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(70%);
  z-index: -1;
}

.blobCont {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.blob:nth-child(1) {
  animation: move1 20s infinite linear;
}

@keyframes move1 {
  from {
    transform: rotate(90deg) translate(200px, 0.1px) rotate(-90deg);
  }
  to {
    transform: rotate(450deg) translate(200px, 0.1px) rotate(-450deg);
  }
}
.blob:nth-child(2) {
  animation: move2 20s infinite linear;
}

@keyframes move2 {
  from {
    transform: rotate(180deg) translate(200px, 0.1px) rotate(-180deg);
  }
  to {
    transform: rotate(540deg) translate(200px, 0.1px) rotate(-540deg);
  }
}
.blob:nth-child(3) {
  animation: move3 20s infinite linear;
}

@keyframes move3 {
  from {
    transform: rotate(270deg) translate(200px, 0.1px) rotate(-270deg);
  }
  to {
    transform: rotate(630deg) translate(200px, 0.1px) rotate(-630deg);
  }
}
.blob:nth-child(4) {
  animation: move4 20s infinite linear;
}

@keyframes move4 {
  from {
    transform: rotate(360deg) translate(200px, 0.1px) rotate(-360deg);
  }
  to {
    transform: rotate(720deg) translate(200px, 0.1px) rotate(-720deg);
  }
}
.blob:nth-child(5) {
  animation: move5 20s infinite linear;
}

@keyframes move5 {
  from {
    transform: rotate(450deg) translate(200px, 0.1px) rotate(-450deg);
  }
  to {
    transform: rotate(810deg) translate(200px, 0.1px) rotate(-810deg);
  }
}
.blob:nth-child(6) {
  animation: move6 20s infinite linear;
}

@keyframes move6 {
  from {
    transform: rotate(540deg) translate(200px, 0.1px) rotate(-540deg);
  }
  to {
    transform: rotate(900deg) translate(200px, 0.1px) rotate(-900deg);
  }
}
.blob:nth-child(7) {
  animation: move7 20s infinite linear;
}

@keyframes move7 {
  from {
    transform: rotate(630deg) translate(200px, 0.1px) rotate(-630deg);
  }
  to {
    transform: rotate(990deg) translate(200px, 0.1px) rotate(-990deg);
  }
}
.blob:nth-child(8) {
  animation: move8 20s infinite linear;
}

@keyframes move8 {
  from {
    transform: rotate(720deg) translate(200px, 0.1px) rotate(-720deg);
  }
  to {
    transform: rotate(1080deg) translate(200px, 0.1px) rotate(-1080deg);
  }
}
.blob:nth-child(9) {
  animation: move9 20s infinite linear;
}

@keyframes move9 {
  from {
    transform: rotate(810deg) translate(200px, 0.1px) rotate(-810deg);
  }
  to {
    transform: rotate(1170deg) translate(200px, 0.1px) rotate(-1170deg);
  }
}
.blob:nth-child(10) {
  animation: move10 20s infinite linear;
}

@keyframes move10 {
  from {
    transform: rotate(900deg) translate(200px, 0.1px) rotate(-900deg);
  }
  to {
    transform: rotate(1260deg) translate(200px, 0.1px) rotate(-1260deg);
  }
}
.blob:nth-child(11) {
  animation: move11 20s infinite linear;
}

@keyframes move11 {
  from {
    transform: rotate(990deg) translate(200px, 0.1px) rotate(-990deg);
  }
  to {
    transform: rotate(1350deg) translate(200px, 0.1px) rotate(-1350deg);
  }
}
.blob:nth-child(12) {
  animation: move12 20s infinite linear;
}

@keyframes move12 {
  from {
    transform: rotate(1080deg) translate(200px, 0.1px) rotate(-1080deg);
  }
  to {
    transform: rotate(1440deg) translate(200px, 0.1px) rotate(-1440deg);
  }
}
.blob:nth-child(13) {
  animation: move13 20s infinite linear;
}

@keyframes move13 {
  from {
    transform: rotate(1170deg) translate(200px, 0.1px) rotate(-1170deg);
  }
  to {
    transform: rotate(1530deg) translate(200px, 0.1px) rotate(-1530deg);
  }
}
.blob:nth-child(14) {
  animation: move14 20s infinite linear;
}

@keyframes move14 {
  from {
    transform: rotate(1260deg) translate(200px, 0.1px) rotate(-1260deg);
  }
  to {
    transform: rotate(1620deg) translate(200px, 0.1px) rotate(-1620deg);
  }
}
.blob:nth-child(15) {
  animation: move15 20s infinite linear;
}

@keyframes move15 {
  from {
    transform: rotate(1350deg) translate(200px, 0.1px) rotate(-1350deg);
  }
  to {
    transform: rotate(1710deg) translate(200px, 0.1px) rotate(-1710deg);
  }
}
.blob:nth-child(16) {
  animation: move16 20s infinite linear;
}

@keyframes move16 {
  from {
    transform: rotate(1440deg) translate(200px, 0.1px) rotate(-1440deg);
  }
  to {
    transform: rotate(1800deg) translate(200px, 0.1px) rotate(-1800deg);
  }
}
.blob:nth-child(17) {
  animation: move17 20s infinite linear;
}

@keyframes move17 {
  from {
    transform: rotate(1530deg) translate(200px, 0.1px) rotate(-1530deg);
  }
  to {
    transform: rotate(1890deg) translate(200px, 0.1px) rotate(-1890deg);
  }
}
.blob:nth-child(18) {
  animation: move18 20s infinite linear;
}

@keyframes move18 {
  from {
    transform: rotate(1620deg) translate(200px, 0.1px) rotate(-1620deg);
  }
  to {
    transform: rotate(1980deg) translate(200px, 0.1px) rotate(-1980deg);
  }
}

当我说它不起作用时，我的意思是气泡不会移动。动画在 Firefox 上不起作用。但在 chrome 上是的。

【问题讨论】：

    标签： html css firefox css-animations


    【解决方案1】：

    来自 Mozilla 关于 CSS 的开发者页面transform：

    只有被盒子模型定位的元素可以被转换。根据经验，如果元素具有 display: block，则由盒子模型定位。

    链接：https://developer.mozilla.org/en-US/docs/Web/CSS/transform

    【讨论】：

    • 我测试了各种“解决方案”，但没有发现任何明显的问题。据说 CSS 中的动画是处理 SVG 的“错误”方式，所以尝试在 svg 文件中进行大部分操作？还遇到了一个用 js 制作动画的人，以解决浏览器支持问题..
    • 非常感谢本杰明。我会尝试不同的方式
    猜你喜欢
    • 2013-07-10
    • 2015-06-03
    • 2014-02-04
    • 2014-02-28
    • 2018-06-25
    • 1970-01-01
    • 2013-01-20
    • 2017-02-22
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode