很棒的 css 动画无法在 iOS 上运行，甚至在 类 和 @-webkit-keyframes 上设置 -webkit-
Awesome css animation not working on iOS even setting -webkit- on classes and @-webkit-keyframes
我的以下 cshtml 文件内容在所有浏览器上都能完美运行，但在我的手机 (iPhone 8) 上除外。在 Android 手机上它工作正常。
我还在所有 @keyframes 和所有 类 上的必要位置添加了前缀 -webkits-，如您在以下代码行中所见：
<div class="footer-top section bg-white m-0 p-0" id="footer">
<svg width="100%" height="100%" viewBox="0 0 100 25">
<defs>
<filter id="goo">
<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 13 -9" result="goo" />
<xfeBlend in="SourceGraphic" in2="goo" />
</filter>
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</defs>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
<use id="wave4" class="wave" xlink:href="#wave" x="0" y="2"></use>
<g class="gooeff" filter="url(#goo)">
<circle class="drop drop1" cx="20" cy="2" r="8.8" />
<circle class="drop drop2" cx="25" cy="2.5" r="7.5" />
<circle class="drop drop3" cx="16" cy="2.8" r="9.2" />
<circle class="drop drop4" cx="18" cy="2" r="8.8" />
<circle class="drop drop5" cx="22" cy="2.5" r="7.5" />
<circle class="drop drop6" cx="26" cy="2.8" r="9.2" />
<circle class="drop drop1" cx="5" cy="4.4" r="8.8" />
<circle class="drop drop2" cx="5" cy="4.1" r="7.5" />
<circle class="drop drop3" cx="8" cy="3.8" r="9.2" />
<circle class="drop drop4" cx="3" cy="4.4" r="8.8" />
<circle class="drop drop5" cx="7" cy="4.1" r="7.5" />
<circle class="drop drop6" cx="10" cy="4.3" r="9.2" />
<circle class="drop drop1" cx="1.2" cy="5.4" r="8.8" />
<circle class="drop drop2" cx="5.2" cy="5.1" r="7.5" />
<circle class="drop drop3" cx="10.2" cy="5.3" r="9.2" />
<circle class="drop drop4" cx="3.2" cy="5.4" r="8.8" />
<circle class="drop drop5" cx="14.2" cy="5.1" r="7.5" />
<circle class="drop drop6" cx="17.2" cy="4.8" r="9.2" />
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
</g>
<path id="wave1" class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</g>
</svg>
和相关的 css 样式 sheet:
.footer-top {
--col-deepblue: #4478e3;
width: 100vw;
height: auto;
overflow: auto;
position: relative;
margin: 0;
padding: 0;
}
svg {
width: 100%;
overflow: auto;
overflow-x: hidden;
}
.wave {
animation: wave 3s linear;
animation-iteration-count: infinite;
fill: #222222;
-webkit-animation: wave 3s linear;
-webkit-animation-iteration-count: infinite;
}
.drop {
fill: var(--col-deepblue);
xfill: #99000055;
animation: drop 3.2s linear infinite normal;
stroke: var(--col-deepblue);
stroke-width: 1;
transform: translateY(25px);
transform-box: fill-box;
transform-origin: 50% 100%;
/*-webkit-*/
-webkit-text-stroke: var(--col-deepblue);
-webkit-text-stroke-width: 1;
-webkit-animation: drop 3.2s linear infinite normal;
-webkit-transform: translateY(25px);
-webkit-transform-box: fill-box;
-webkit-transform-origin: 50% 100%;
}
.drop1 {
}
.drop2 {
animation-delay: 3s;
animation-duration: 3s;
-webkit-animation-delay: 3s;
-webkit-animation-duration: 3s;
}
.drop3 {
animation-delay: -2s;
animation-duration: 3.4s;
-webkit-animation-delay: -2s;
-webkit-animation-duration: 3.4s;
}
.drop4 {
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
}
.drop5 {
animation-delay: 2.7s;
animation-duration: 3.1s;
-webkit-animation-delay: 2.7s;
-webkit-animation-duration: 3.1s;
}
.drop6 {
animation-delay: -2.1s;
animation-duration: 3.2s;
-webkit-animation-delay: -2.1s;
-webkit-animation-duration: 3.2s;
}
.gooeff {
filter: url(#goo);
-webkit-filter: url(#goo);
}
#wave2 {
animation-duration: 5s;
animation-direction: reverse;
-webkit-animation-duration: 5s;
-webkit-animation-direction: reverse;
opacity: .6
}
#wave3 {
animation-duration: 7s;
-webkit-animation-duration: 7s;
opacity: .3;
}
#wave4 {
animation-duration: 9s;
-webkit-animation-duration: 9s;
opacity: .5;
}
@keyframes drop {
0% {
transform: translateY(25px);
}
30% {
transform: translateY(-10px) scale(.1);
}
30.001% {
transform: translateY(25px) scale(1);
}
70% {
transform: translateY(25px);
}
100% {
transform: translateY(-10px) scale(.1);
}
}
@-webkit-keyframes drop {
0% {
-webkit-transform: translateY(25px);
}
30% {
-webkit-transform: translateY(-10px) scale(.1);
}
30.001% {
-webkit-transform: translateY(25px) scale(1);
}
70% {
-webkit-transform: translateY(25px);
}
100% {
-webkit-transform: translateY(-10px) scale(.1);
}
}
@keyframes wave {
to {
transform: translateX(-100%);
}
}
@-webkit-keyframes wave {
to {
-webkit-transform: translateX(-100%);
}
}
@supports (-webkit-backdrop-filter: blur(1px)) {
svg {
height: 100%;
}
}
动画在除 iOS 以外的所有浏览器中运行良好。我正在使用 iPhone 8.
我尝试了几个建议，其中还有 this 一个。但这并没有解决我的问题。
在 Android 移动设备上运行良好。
有什么想法吗？
您的代码不仅在 iOS 中不起作用，而且在 macOS 上的 Safari 中也不起作用，这是一个奇怪的问题，但在 feColorMatrix 中出错，将 values 移动到一个行
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 13 -9"
result="goo" />
我的以下 cshtml 文件内容在所有浏览器上都能完美运行，但在我的手机 (iPhone 8) 上除外。在 Android 手机上它工作正常。
我还在所有 @keyframes 和所有 类 上的必要位置添加了前缀 -webkits-，如您在以下代码行中所见：
<div class="footer-top section bg-white m-0 p-0" id="footer">
<svg width="100%" height="100%" viewBox="0 0 100 25">
<defs>
<filter id="goo">
<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 13 -9" result="goo" />
<xfeBlend in="SourceGraphic" in2="goo" />
</filter>
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</defs>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
<use id="wave4" class="wave" xlink:href="#wave" x="0" y="2"></use>
<g class="gooeff" filter="url(#goo)">
<circle class="drop drop1" cx="20" cy="2" r="8.8" />
<circle class="drop drop2" cx="25" cy="2.5" r="7.5" />
<circle class="drop drop3" cx="16" cy="2.8" r="9.2" />
<circle class="drop drop4" cx="18" cy="2" r="8.8" />
<circle class="drop drop5" cx="22" cy="2.5" r="7.5" />
<circle class="drop drop6" cx="26" cy="2.8" r="9.2" />
<circle class="drop drop1" cx="5" cy="4.4" r="8.8" />
<circle class="drop drop2" cx="5" cy="4.1" r="7.5" />
<circle class="drop drop3" cx="8" cy="3.8" r="9.2" />
<circle class="drop drop4" cx="3" cy="4.4" r="8.8" />
<circle class="drop drop5" cx="7" cy="4.1" r="7.5" />
<circle class="drop drop6" cx="10" cy="4.3" r="9.2" />
<circle class="drop drop1" cx="1.2" cy="5.4" r="8.8" />
<circle class="drop drop2" cx="5.2" cy="5.1" r="7.5" />
<circle class="drop drop3" cx="10.2" cy="5.3" r="9.2" />
<circle class="drop drop4" cx="3.2" cy="5.4" r="8.8" />
<circle class="drop drop5" cx="14.2" cy="5.1" r="7.5" />
<circle class="drop drop6" cx="17.2" cy="4.8" r="9.2" />
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
</g>
<path id="wave1" class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</g>
</svg>
和相关的 css 样式 sheet:
.footer-top {
--col-deepblue: #4478e3;
width: 100vw;
height: auto;
overflow: auto;
position: relative;
margin: 0;
padding: 0;
}
svg {
width: 100%;
overflow: auto;
overflow-x: hidden;
}
.wave {
animation: wave 3s linear;
animation-iteration-count: infinite;
fill: #222222;
-webkit-animation: wave 3s linear;
-webkit-animation-iteration-count: infinite;
}
.drop {
fill: var(--col-deepblue);
xfill: #99000055;
animation: drop 3.2s linear infinite normal;
stroke: var(--col-deepblue);
stroke-width: 1;
transform: translateY(25px);
transform-box: fill-box;
transform-origin: 50% 100%;
/*-webkit-*/
-webkit-text-stroke: var(--col-deepblue);
-webkit-text-stroke-width: 1;
-webkit-animation: drop 3.2s linear infinite normal;
-webkit-transform: translateY(25px);
-webkit-transform-box: fill-box;
-webkit-transform-origin: 50% 100%;
}
.drop1 {
}
.drop2 {
animation-delay: 3s;
animation-duration: 3s;
-webkit-animation-delay: 3s;
-webkit-animation-duration: 3s;
}
.drop3 {
animation-delay: -2s;
animation-duration: 3.4s;
-webkit-animation-delay: -2s;
-webkit-animation-duration: 3.4s;
}
.drop4 {
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
}
.drop5 {
animation-delay: 2.7s;
animation-duration: 3.1s;
-webkit-animation-delay: 2.7s;
-webkit-animation-duration: 3.1s;
}
.drop6 {
animation-delay: -2.1s;
animation-duration: 3.2s;
-webkit-animation-delay: -2.1s;
-webkit-animation-duration: 3.2s;
}
.gooeff {
filter: url(#goo);
-webkit-filter: url(#goo);
}
#wave2 {
animation-duration: 5s;
animation-direction: reverse;
-webkit-animation-duration: 5s;
-webkit-animation-direction: reverse;
opacity: .6
}
#wave3 {
animation-duration: 7s;
-webkit-animation-duration: 7s;
opacity: .3;
}
#wave4 {
animation-duration: 9s;
-webkit-animation-duration: 9s;
opacity: .5;
}
@keyframes drop {
0% {
transform: translateY(25px);
}
30% {
transform: translateY(-10px) scale(.1);
}
30.001% {
transform: translateY(25px) scale(1);
}
70% {
transform: translateY(25px);
}
100% {
transform: translateY(-10px) scale(.1);
}
}
@-webkit-keyframes drop {
0% {
-webkit-transform: translateY(25px);
}
30% {
-webkit-transform: translateY(-10px) scale(.1);
}
30.001% {
-webkit-transform: translateY(25px) scale(1);
}
70% {
-webkit-transform: translateY(25px);
}
100% {
-webkit-transform: translateY(-10px) scale(.1);
}
}
@keyframes wave {
to {
transform: translateX(-100%);
}
}
@-webkit-keyframes wave {
to {
-webkit-transform: translateX(-100%);
}
}
@supports (-webkit-backdrop-filter: blur(1px)) {
svg {
height: 100%;
}
}
动画在除 iOS 以外的所有浏览器中运行良好。我正在使用 iPhone 8.
我尝试了几个建议，其中还有 this 一个。但这并没有解决我的问题。
在 Android 移动设备上运行良好。
有什么想法吗？
您的代码不仅在 iOS 中不起作用，而且在 macOS 上的 Safari 中也不起作用，这是一个奇怪的问题，但在 feColorMatrix 中出错，将 values 移动到一个行
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 13 -9"
result="goo" />