CSS 文本动画不会在 Safari 中显示，我无法让 @supports 查询作为备份

Posted 2023-03-06

【中文标题】CSS 文本动画不会在 Safari 中显示，我无法让 @supports 查询作为备份

【英文标题】：CSS text animation won't show in Safari, and I can't get the @supports query to work as a backup

【发布时间】：2022-01-18 01:23:58

【问题描述】：

我正在制作这种打字机动画，它在 Chrome 中很好，但对我来说在 Safari 中不起作用，所以我认为浏览器不支持我正在尝试做的事情。所以我想为文本动画添加一个备份，这样它就不会使用@supports查询显示一个空白框，但我似乎无法让它工作。

.typewriter-container 
  position: relative;


.typewriter-heading
    font-family: "Gibson"; 
    font-size: 75px; 



@supports (animation-fill-mode: forwards)
  .typewriter-heading:after 
    position: absolute;
    content: "";
    animation: typewriter 3.5s linear 1;
    animation-fill-mode: forwards;
  


  @keyframes typewriter 
    0% 
      content: "D";
     
     5% 
       content: "De";
     
     10% 
       content: "Des";
     
     15% 
       content: "Desi";
     
     20% 
       content: "Desig";
     
     25% 
      content: "Design";
     
     30% 
      content: "Design.";
     
     50% 
       content: "Design";
     
     55% 
      content: "Desig";
     
     60% 
      content: "Desi";
     
     65% 
       content: "Des";
     
     70% 
       content: "De";
     
     75% 
      content: "Dev";
     
     80% 
       content: "Deve";
     
    85% 
      content: "Devel";
     
     90% 
       content: "Develo";
     
     95% 
       content: "Develop";
     
     100% 
      content: "Develop.";
    
  


@supports not (animation-fill-mode: forwards)
  .typewriter-heading:after
    content: "Design/Develop."; 
    position: absolute; 
  

<div class="typewriter-container">
  <h1 class="typewriter-heading"></h1>
</div>

关于如何显示备用文本的任何提示？ 您可以在marissaransil.com查看此版本的实时版本

【参考方案1】：

我认为这里的问题是 Safari确实 支持动画填充模式，因此您的备份永远无法到达。尝试像这样删除@supports：

.typewriter-container 
  position: relative;

.typewriter-heading 
  font-family: "Gibson";
  font-size: 75px;

.typewriter-heading:after 
  position: absolute;
  content: "";
  animation: typewriter 3.5s linear 1;
  -webkit-animation: typewriter 3.5s linear 1;
  animation-fill-mode: forwards;
  display: inline-block;

@keyframes typewriter 
  0% 
    content: "D";
  
  5% 
    content: "De";
  
  10% 
    content: "Des";
  
  15% 
    content: "Desi";
  
  20% 
    content: "Desig";
  
  25% 
    content: "Design";
  
  30% 
    content: "Design.";
  
  50% 
    content: "Design";
  
  55% 
    content: "Desig";
  
  60% 
    content: "Desi";
  
  65% 
    content: "Des";
  
  70% 
    content: "De";
  
  75% 
    content: "Dev";
  
  80% 
    content: "Deve";
  
  85% 
    content: "Devel";
  
  90% 
    content: "Develo";
  
  95% 
    content: "Develop";
  
  100% 
    content: "Develop.";
  

.typewriter-heading:after 
  content: "Design/Develop.";
  position: absolute;

【讨论】：

我所做的所有研究都表明 Safari 应该支持这一点，但删除 @supports 仍然只会让我在 Safari 中留下一个空白框。也许还有其他不支持的东西？感谢您的帮助！