CODEWITHSUNDEEP
htmlcssiosbrowsercss-animations
Dave
Dave

Reputation: 201

CSS Animation does only work in Firefox and Chrome, but not on Apple Devices (Safari?)

I have made a little animation counting numbers that works completely fine in Firefox and Chrome browsers, but not in default browser of Apple devices (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>

How can I make this work also on Apple devices?

Maybe add some -webkit-animation or @-webkit-keyframes somewhere?

Upvotes: 0

Views: 661

Answers (1)

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

Use webkits for your keyframes:

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

Also take a look at CanIUse

Upvotes: 1

Related Questions