.hero .keyframes
{
  font-size: 38px;
  font-weight: 600;
}
.hero .keyframes::after
{
  content: "";
  animation: example 10s infinite ;
}
@keyframes example
{
  0% {content: "  |";}
  1% {content: " D |";}
  2% {content: " De |";}
  3% {content: " Des |";}
  4% {content: " Desi |";}
  6% {content: " Desig |";}
  7% {content: " Design |";}
  8% {content: " Designe |";}
  9% {content: " Designer |";}
  10% {content: " Designer |";}
  11% {content: " Designer |";}
  12% {content: " Designer |";}
  13% {content: " Designe |";}
  14% {content: " Design |";}
  15% {content: " Desig |";}
  16% {content: " Desi |";}
  17% {content: " Des |";}
  18% {content: " De |";}
  19% {content: " D |";}
  20% {content: " F |";}
  22% {content: " Fr |";}
  24% {content: " Fre |";}
  25% {content: " Free |";}
  26% {content: " Freel |";}
  27% {content: " Freela |";}
  28% {content: " Freelan |";}
  29% {content: " Freelanc |";}
  30% {content: " Freelance |";}
  31% {content: " Freelancer |";}
  32% {content: " Freelancer |";}
  33% {content: " Freelancer |";}
  34% {content: " Freelancer |";}
  35% {content: " Freelance |";}
  36% {content: " Freelanc |";}
  37% {content: " Freelan |";}
  38% {content: " Freela |";}
  39% {content: " Freel |";}
  40% {content: " Free |";}
  41% {content: " Fre |";}
  42% {content: " Fr |";}
  43% {content: " F |";}
  44% {content: "  |";}
  45% {content: " D |";}
  46% {content: " De |";}
  47% {content: " Dev |";}
  48% {content: " Deve |";}
  49% {content: " Devel |";}
  50% {content: " Develo |";}
  51% {content: " Develop |";}
  52% {content: " Develope |";}
  53% {content: " Developer |";}
  54% {content: " Developer |";}
  55% {content: " Developer |";}
  56% {content: " Developer |";}
  57% {content: " Develope |";}
  58% {content: " Develop |";}
  59% {content: " Develo |";}
  60% {content: " Devel |";}
  61% {content: " Deve |";}
  62% {content: " Dev |";}
  63% {content: " De |";}
  64% {content: " D |";}
  65% {content: " L |";}
  66% {content: " La |";}
  67% {content: " Lar |";}
  68% {content: " Larr |";}
  69% {content: " Larry |";}
  70% {content: " Larry D |";}
  71% {content: " Larry Da |";}
  72% {content: " Larry Dan |";}
  73% {content: " Larry Dani |";}
  74% {content: " Larry Danie |";}
  75% {content: " Larry Daniel |";}
  76% {content: " Larry Daniels |";}
  77% {content: " Larry Daniels |";}
  78% {content: " Larry Daniels |";}
  79% {content: " Larry Daniels |";}
  81% {content: " Larry Daniels |";}
  82% {content: " Larry Daniels |";}
  83% {content: " Larry Daniels |";}
  84% {content: " Larry Daniels |";}
  85% {content: " Larry Daniels |";}
  86% {content: " Larry Daniels |";}
  87% {content: " Larry Daniels |";}
  87% {content: " Larry Daniels |";}
  88% {content: " Larry Daniels |";}
  89% {content: " Larry Daniel |";}
  90% {content: " Larry Danie |";}
  91% {content: " Larry Dani |";}
  92% {content: " Larry Dan |";}
  93% {content: " Larry Da |";}
  94% {content: " Larry D |";}
  95% {content: " Larry |";}
  96% {content: " Larr |";}
  97% {content: " Lar |";}
  98% {content: " La |";}
  99% {content: " L |";}
  100% {content: "  |";}
}