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 Animation working on Chrome but not on Safari
It's because you're not setting the full range on the transform percentage. Safari requires that you specify the 100% endpoint. See this related answer: CSS3 animation not working in safari
CSS animation works on Safari and Firefox but not on Chrome
modify second animation-name(without prefix).
Before
-webkit-animation-name: rocketLaunch;
animation-name: rocket-launch;
After
-webkit-animation-name: rocketLaunch;
animation-name: rocketLaunch;
please notice difference in animation name.
also,
If you don't care about browser version(cross browser)
I would like to recommend for remove prefix.
Proposal
#rocket {
position: relative;
top: 10px;
animation-name: rocketLaunch;
animation-duration: 5s;
}
Thank you :)
CSS Animation works in Chrome but not Safari
I think there are two ways you can address this issue for Safari.
The first is using JavaScript to kickstart your animation.
Using Charles proxy, I manipulated the response so that this:
<p class="marquee" id="countries">
became this:
<p class="marquee-pre" id="countries">
Then, I injected the following JS at the bottom of the page:
<script>
$('.marquee-pre').attr('class', 'marquee');
</script>
which immediately addressed the issue.
If you don't mind adding JS to your page, I would recommend this approach.
If you can't add JS, or prefer not to, I found making the following change to the CSS animation also worked:
.marquee span {
-webkit-animation: moveSlideshow 165s linear infinite;
}
to:
.marquee span {
-webkit-animation: moveSlideshow 165s steps(10000) infinite;
}
While this works, I found it wasn't as "smooth" as using linear timing...
CSS Animation Currently Only working in Firefox, not Chrome or Safari
You can use tranform translateY() instead of top values and it should work cross-browser. Pretty sure Chrome does not respect the position relative for child SVG elements.
html,
body {
width: 100%;
height: 100%;
background-color: #F2EFEB;
}
.intro-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
}
.logo-bottom,
.logo-top {
display: inline-block;
position: relative;
}
.logo-bottom {
-o-animation: logo-anim-bottom 1.5s;
-ms-animation: logo-anim-bottom 1.5s;
-moz-animation: logo-anim-bottom 1.5s;
-webkit-animation: logo-anim-bottom 1.5s infinite;
animation: logo-anim-bottom 1.5s infinite;
}
.logo-top {
-o-animation: logo-anim-top 1.5;
-ms-animation: logo-anim-top 1.5;
-moz-animation: logo-anim-top 1.5s;
-webkit-animation: logo-anim-top 1.5 infinite;
animation: logo-anim-top 1.5s infinite;
}
@-ms-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-o-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-moz-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-webkit-keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@keyframes logo-anim-bottom {
0% {
transform: translateY(0)
}
26% {
transform: translateY(0)
}
29% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-ms-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-o-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-moz-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@-webkit-keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
@keyframes logo-anim-top {
0% {
transform: translateY(-55px)
}
25% {
transform: translateY(-75px)
}
30% {
transform: translateY(15px)
}
40% {
transform: translateY(0)
}
}
.red {
fill: #E491C5;
}
.yellow {
fill: #FDF388;
}
.dark-yellow {
fill: #e0d580;
}
.brown {
fill: #633E17;
}
.pure-white {
fill: #ffffff;
}
.dark-grey {
fill: #30332a;
}
.white {
fill: #F2EFEB;
}
.black {
fill: #181914;
}<div class="intro-container">
<div class="animate__animated animate__fadeOut animate__fast animate__delay-1s">
<svg width="250px" height="350px" viewBox="0 0 250 350" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="slide" class="logo-top">
<circle class="pure-white" cx="126.01" cy="205.99" r="61.21"/>
<path class="dark-grey" d="M134.27,154.76v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C133.12,152.2,134.27,153.34,134.27,154.76z"/>
<path class="dark-grey" d="M158.9,163.6l-4.31,10.55c-0.54,1.31-2.03,1.94-3.34,1.4l-10.55-4.31c-1.31-0.54-1.94-2.03-1.4-3.34
l4.31-10.55c0.54-1.31,2.03-1.94,3.34-1.4l10.55,4.31C158.81,160.79,159.44,162.29,158.9,163.6z"/>
<path class="dark-grey" d="M134.27,244.97v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C133.12,242.41,134.27,243.56,134.27,244.97z"/>
<path class="dark-grey" d="M88.35,200.3v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C87.2,197.73,88.35,198.88,88.35,200.3z"/>
<path class="dark-grey" d="M178.45,200.3v11.4c0,1.42-1.15,2.56-2.56,2.56h-11.4c-1.42,0-2.56-1.15-2.56-2.56v-11.4
c0-1.42,1.15-2.56,2.56-2.56h11.4C177.31,197.73,178.45,198.88,178.45,200.3z"/>
<path class="dark-grey" d="M170.99,174.6l4.56,10.45c0.57,1.3-0.03,2.81-1.32,3.37l-10.45,4.56c-1.3,0.57-2.81-0.03-3.37-1.32
l-4.56-10.45c-0.57-1.3,0.03-2.81,1.32-3.37l10.45-4.56C168.91,172.71,170.42,173.3,170.99,174.6z"/>
<path class="dark-grey" d="M96.16,174.53l-4.31-10.55c-0.54-1.31,0.09-2.81,1.4-3.34l10.55-4.31c1.31-0.54,2.81,0.09,3.34,1.4
l4.31,10.55c0.54,1.31-0.09,2.81-1.4,3.34l-10.55,4.31C98.19,176.46,96.7,175.84,96.16,174.53z"/>
<path class="dark-grey" d="M75.24,185.43l4.56-10.45c0.57-1.3,2.08-1.89,3.37-1.32l10.45,4.56c1.3,0.57,1.89,2.08,1.32,3.37l-4.56,10.45
c-0.57,1.3-2.08,1.89-3.37,1.32l-10.45-4.56C75.27,188.24,74.68,186.73,75.24,185.43z"/>
<path class="dark-grey" d="M93.43,247.92l4.31-10.55c0.54-1.31,2.03-1.94,3.34-1.4l10.55,4.31c1.31,0.54,1.94,2.03,1.4,3.34l-4.31,10.55
c-0.54,1.31-2.03,1.94-3.34,1.4l-10.55-4.31C93.52,250.72,92.89,249.23,93.43,247.92z"/>
<path class="dark-grey" d="M81.34,236.92l-4.56-10.45c-0.57-1.3,0.03-2.81,1.32-3.37l10.45-4.56c1.3-0.57,2.81,0.03,3.37,1.32
l4.56,10.45c0.57,1.3-0.03,2.81-1.32,3.37l-10.45,4.56C83.42,238.81,81.91,238.21,81.34,236.92z"/>
<path class="dark-grey" d="M154.29,237.9l4.31,10.55c0.54,1.31-0.09,2.81-1.4,3.34l-10.55,4.31c-1.31,0.54-2.81-0.09-3.34-1.4
l-4.31-10.55c-0.54-1.31,0.09-2.81,1.4-3.34l10.55-4.31C152.25,235.96,153.75,236.58,154.29,237.9z"/>
<path class="dark-grey" d="M175.22,226.99l-4.56,10.45c-0.57,1.3-2.08,1.89-3.37,1.32l-10.45-4.56c-1.3-0.57-1.89-2.08-1.32-3.37
l4.56-10.45c0.57-1.3,2.08-1.89,3.37-1.32l10.45,4.56C175.19,224.18,175.78,225.69,175.22,226.99z"/>
</g>
<g id="viewmaster" class="logo-bottom">
<g>
<path class="yellow" d="M212.43,184.86c2.66,6.89,8.95,11.97,16.53,12.9c-2.38,2.14-5.03,3.61-7.25,4.59
c-2.78-2.16-6.23-3.52-10.01-3.68c-0.61-0.08-1.22-0.14-1.83-0.21l-0.64-12.25C210.33,185.81,211.39,185.36,212.43,184.86z"/>
<path class="yellow" d="M213.71,177.53L213.71,177.53c0-9.79,7.94-17.73,17.73-17.73s17.73,7.94,17.73,17.73s-7.94,17.73-17.73,17.73
C221.66,195.26,213.73,187.32,213.71,177.53z M231.45,171.37c-3.41-0.01-6.18,2.75-6.18,6.16c0,3.4,2.75,6.15,6.14,6.16
c3.4,0.01,6.17-2.74,6.18-6.14C237.6,174.15,234.85,171.38,231.45,171.37L231.45,171.37z"/>
<path class="dark-yellow" d="M217.81,177.53C217.81,177.53,217.81,177.53,217.81,177.53c0-7.53,6.11-13.64,13.64-13.64
s13.64,6.11,13.64,13.64c0,7.53-6.11,13.64-13.64,13.64C223.92,191.17,217.81,185.06,217.81,177.53z M221.2,177.53
c0,0.01,0,0.01,0,0.02c0.01,5.67,4.62,10.26,10.29,10.25c5.67-0.01,10.26-4.62,10.25-10.29c-0.01-5.67-4.62-10.26-10.29-10.25
C225.79,167.28,221.2,171.87,221.2,177.53z"/>
<circle class="yellow" cx="231.45" cy="177.53" r="11.95"/>
</g>
<path class="red" d="M44.2,198.19c0.21-4.59,0.58-12.6,0.88-18.43c0.46-8.64,4.42-11.11,6.96-12.67
c2.54-1.56,17.14-0.91,28.13-0.91c11.95,7.02,28.25,9.14,45.84,9.75c17.59-0.64,33.89-2.73,45.83-9.75c11,0,25.6-0.64,28.14,0.91
c2.54,1.55,6.5,4.06,6.95,12.67c0.3,5.81,0.66,13.83,0.86,18.43C153.45,191.72,98.54,191.72,44.2,198.19z"/>
<path class="red" d="M207.85,256.46c-0.89,14.56-6.66,47.82-8.56,52.07c-2.08,4.67-8.12,5.2-8.12,5.2H60.86
c0,0-6.09-0.52-8.12-5.2c-1.85-4.26-7.66-37.51-8.57-52.06c27.09,3.22,54.34,4.85,81.63,4.84
C153.22,261.3,180.62,259.67,207.85,256.46z"/>
<path class="red" d="M25.89,216.15v22.34c0.01,8.14,6.46,14.82,14.59,15.11c28.3,3.53,56.79,5.29,85.31,5.29
c28.66,0,57.29-1.77,85.73-5.29c8.14-0.29,14.59-6.97,14.59-15.11v-22.34c-0.01-8.14-6.46-14.81-14.59-15.1
c-56.79-7.11-114.24-7.11-171.03,0C32.35,201.33,25.9,208.01,25.89,216.15z M33.16,216.16c0.02-4.35,3.54-7.87,7.89-7.88
c56.44-7.13,113.55-7.13,169.99,0c4.33,0.03,7.83,3.54,7.85,7.87v22.34c-0.02,4.35-3.54,7.87-7.89,7.89
c-56.44,7.08-113.55,7.08-169.99,0c-4.33-0.04-7.83-3.55-7.85-7.88V216.16z"/>
<path id="_x3C_Path_x3E_" class="dark-grey" d="M41.06,208.28c56.44-7.13,113.55-7.13,169.99,0c4.33,0.03,7.83,3.54,7.85,7.87v22.34
c-0.02,4.35-3.54,7.87-7.89,7.89c-56.44,7.08-113.55,7.08-169.99,0c-4.33-0.04-7.83-3.55-7.85-7.88v-22.34
C33.18,211.81,36.71,208.29,41.06,208.28z"/>
</g>
</svg>
</div>
</div>Related Topics
CSS Positioning 70-30 with Inline-Block
How to Add Background Image in CSS
Primefaces Schedule Event Color Is Not Working After Replacing Primefaces Jar 3.3 by 4.0
Why Does The Img Tag Accept The Margin-Top Property
CSS Targetting The Last of a Class Type That Isn't The Last-Child
How to Animate Element Again, After Animation-Fill-Mode: Forward
Susy 2.0 Change Columns at Breakpoint
How to Have Scrollbar When Position Is Negative
Build a Repetitive Selector Within a Less Loop
CSS Text Padding Difference Firefox Vs Chrome and Others
Submit Input Doesn't Get The: Active State in Ie8 When I Click on The Button's Text
Merge Ttf Font Files (For Using in CSS)