CSS3 animation not working in safari
Found the solution. In Safari when you use Keyframes you need to use the whole percentage:
this won't work:
@-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
}
this will:
@-webkit-keyframes keyarm {
0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
Don't know why but that's the way Safari works! :)
CSS Animation does only work in Firefox and Chrome, but not on Apple Devices (Safari?)
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>CSS @-webkit-keyframes animation not working
I can not flag or comment with my current reputation, but this was answered here before, please flag it as duplicated https://stackoverflow.com/a/40078500/2498992
Related Topics
Flushing Footer to Bottom of the Page, Twitter Bootstrap
Wave (Or Shape) With Border on Css3
How to Display a Reverse-Ordered List in Html
How to Include a Font Awesome Icon in My Svg
Float:Right Reverses Order of Spans
Firefox Overflow-Y Not Working with Nested Flexbox
CSS Margin-Top of <H1> Affects Parent's Margin
How to Stop Chrome from Yellowing My Site's Input Boxes
Any Way to Limit Border Length
Scrolling a Flexbox With Overflowing Content
How to Animate Handwriting Text on the Web Page Using Svg
Passing Parameters to CSS Animation
How to Remove the Url from My Print Css, So the Web Address Doesn't Print
@Font-Face Works in Ie8 But Not Ie9
Prevent That a Fixed Element Resizes When Zooming on Touchscreen