CSS text animation won't show in Safari, and I can't get the @supports query to work as a backup

user_17676870 0
Viewed 45

I'm working on this typewriter animation that is fine in Chrome but isn't working in Safari for me, so I assumed that the browser doesn't support what I am trying to do. So I wanted to add a backup to the text animation so that it doesn't show a blank box by using the @supports query, but I can't seem to get this working.

.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>

Any tips on how to get the backup text to show? You can view a live version of this at marissaransil.com

media-queries css
1 Answers

I think the problem here is that Safari does support animation-fill-mode, so your backup is never reached. Try removing the @supports like this:

.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;
}
user_172939940
Related