时间戳

首页 > 解决方案 > CSS Animation 仅适用于 Firefox 和 Chrome，但不适用于 Apple 设备（Safari？）

html - CSS Animation 仅适用于 Firefox 和 Chrome，但不适用于 Apple 设备（Safari？）

问题描述

我制作了一些动画计数，它们在 Firefox 和 Chrome 浏览器中运行良好，但在 Apple 设备的默认浏览器（Safari？）中却不行：

div::after {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 5s linear forwards;
  counter-reset: count 0;
}

@keyframes counter {
   0% { counter-increment: count 0;    }
  10% { counter-increment: count 8;    }
  20% { counter-increment: count 16;   }
  30% { counter-increment: count 32;   }
  40% { counter-increment: count 64;   }
  50% { counter-increment: count 128;  }
  60% { counter-increment: count 256;  }
  70% { counter-increment: count 512;  }
  80% { counter-increment: count 1024; }
  90% { counter-increment: count 2048; }
 100% { counter-increment: count 4000; }
}
<div></div>

我怎样才能在 Apple 设备上也能做到这一点？

也许添加一些-webkit-animation或@-webkit-keyframes某处？

标签： htmlcssiosbrowsercss-animations

解决方案

用于webkits您的关键帧：

@-webkit-keyframes counter {
   0% { -webkit-counter-increment: count 0;    }
  10% { -webkit-counter-increment: count 8;    }
  20% { -webkit-counter-increment: count 16;   }
  30% { -webkit-counter-increment: count 32;   }
  40% { -webkit-counter-increment: count 64;   }
  50% { -webkit-counter-increment: count 128;  }
  60% { -webkit-counter-increment: count 256;  }
  70% { -webkit-counter-increment: count 512;  }
  80% { -webkit-counter-increment: count 1024; }
  90% { -webkit-counter-increment: count 2048; }
 100% { -webkit-counter-increment: count 4000; }
}

@keyframes counter {
   0% { counter-increment: count 0;    }
  10% { counter-increment: count 8;    }
  20% { counter-increment: count 16;   }
  30% { counter-increment: count 32;   }
  40% { counter-increment: count 64;   }
  50% { counter-increment: count 128;  }
  60% { counter-increment: count 256;  }
  70% { counter-increment: count 512;  }
  80% { counter-increment: count 1024; }
  90% { counter-increment: count 2048; }
 100% { counter-increment: count 4000; }
}


div::after {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 5s linear forwards;
  counter-reset: count 0;
}
<div></div>

也看看CanIUse

推荐阅读