Firefox 上的动画不起作用（仅限 CSS）
Posted
技术标签:
【中文标题】Firefox 上的动画不起作用（仅限 CSS）【英文标题】：Animation on firefox doesn't work (css only) 【发布时间】：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)" 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" >
<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(#$adeg) translate( 200px ,0.1px) rotate(-#$adeg);
to
transform:rotate(#$bdeg) translate( 200px ,0.1px) rotate(-#$bdeg);
如果需要，从 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 上是的。
【问题讨论】：
【参考方案1】：来自 Mozilla 关于 CSS 的开发者页面transform：
只有被盒子模型定位的元素可以被转换。根据经验，如果元素具有 display: block，则由盒子模型定位。
链接：https://developer.mozilla.org/en-US/docs/Web/CSS/transform
【讨论】：
我测试了各种“解决方案”，但没有发现任何明显的问题。据说 CSS 中的动画是处理 SVG 的“错误”方式，所以尝试在 svg 文件中进行大部分操作？还遇到了一个用 js 制作动画的人，以解决浏览器支持问题.. 非常感谢本杰明。我会尝试不同的方式以上是关于Firefox 上的动画不起作用（仅限 CSS）的主要内容，如果未能解决你的问题，请参考以下文章