Currently working on a simple animation to show a slide being inserted into a viewmaster.
it works in firefox, but not chrome or safari. I haven't tested other browsers yet. I've included -webkit-animation as well as @-webkit-keyframes. I've been trying to find other similar questions, but no luck so far.
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% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
@-o-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
@-moz-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
@-ms-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
@-webkit-keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
@keyframes logo-anim-bottom {
0% {
top: 0;
}
26% {
top: 0;
}
29% {
top: 15px;
}
40% {
top: 0;
}
}
@-ms-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
@-o-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
@-moz-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
@-ms-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
@-webkit-keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 0;
}
}
@keyframes logo-anim-top {
0% {
top: -55px;
}
25% {
top: -75px;
}
30% {
top: 15px;
}
40% {
top: 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>CodePudding user response：
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>