I would like to have a balloon pop and when it does I comic style "POP" SVG will appear indicating the pop. I am struggling to figure out a way to position the pop svg so it is at the same location as the balloon popping. You can see it happen in my code at around 18-19 seconds. The turtle on the balloon comes in for the second time and then starts to fade out. You can see the POP happen on the top-left of the screen.
Any ideas on how I can get them to line up? Should I use JS?
html {
box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
overflow:hidden;
width: 100vw;
height: 100vh;
}
.BalloonContainer {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.flying img {
max-width: 150px;
position: absolute;
top: 20px;
transform: translateX(-30vw);
animation: moveBird 2s linear 16.9s 1 forwards;
}
#-webkit-keyframes moveBird {
0% {
transform: translateX(-30vw) rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: translateX(45vw) rotate(3deg);
}
}
.initialBalloon {
position: absolute;
/* moves initial position before animating */
transform: translateX(100vw);
top: 150px;
animation: moveFirst 2s linear .2s 1;
width: 150px;
}
.firstBalloon {
position: absolute;
transform: translateX(-30vw);
top: 150px;
animation: move 5s linear 5s infinite;
width: 150px;
}
.secondBalloon {
position: absolute;
transform: translateX(-30vw);
top: 200px;
animation: move 8s linear 0s infinite;
width: 150px;
}
.thirdBalloon {
top: 250px;
transform: translateX(-30vw);
position: absolute;
animation: move 11s linear 1s infinite;
width: 150px;
}
.turtle {
position: absolute;
top: 50px;
transform: translateX(-50vw);
opacity: 1;
animation: moveTurtle 5s linear 1s 1 none,
moveTurtleStop 11s linear 6s 1 forwards,
moveTurtleRotate 5s linear 17s infinite forwards,
hideOpacity 1s linear 19s 1 forwards;
width: 250px;
}
.pop {
position: absolute;
opacity: 0;
top: 50px;
width: 100px;
transform: translateX(0vw) translateY(0vw);
animation: pow 1s linear 19s 1 none;
}
#-webkit-keyframes pow {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes hideOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes moveTurtle {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleRotate {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(50vw) rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleStop {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes move {
0% {
transform: translateX(-30vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(75vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#-webkit-keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<div class="BalloonContainer">
<div class="flying">
<img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
</div>
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_1</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="firstBalloon swingimage">
<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_2</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="secondBalloon swingimage">
<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_3</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="thirdBalloon swingimage">
<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_4</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="theTurtle">
<div class="turtle swingimage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.826 171.637"><defs><style>.cls-1{fill:#171618;}</style></defs><title>turtleandBalloon</title><g id="balloonTotalMain"><polygon id="stringMain" class="cls-1" points="38.5 121.946 40.57 53.946 41.734 53.946 42.5 121.946 38.5 121.946"/><path id="bPiece_8" class="cls-1" d="M37.608,52.314a3.2,3.2,0,0,1-2.537-1.509c-.841-1.122-1.6-2.316-2.265-3.37a24.353,24.353,0,0,0-1.788-2.6,6.229,6.229,0,0,1-1.745,2.484l-.7.654-.648-.71a45.517,45.517,0,0,1-8.488-12.955l-.348-.83.809-.394a23.644,23.644,0,0,1,9.887-2.607,12.738,12.738,0,0,1,4.482.772c4,1.5,5.27,2.77,6.29,3.79.873.873,1.45,1.45,4.006,1.876.5.083.929.151,1.3.21,1.876.3,2.508.4,2.745,1.171.221.72-.294,1.2-.839,1.713a13.461,13.461,0,0,0-2.547,3.1c-.435.725-.871,1.5-1.306,2.266C41.9,48.942,39.989,52.314,37.608,52.314Z" transform="translate(0)"/><path id="bPiece_7" class="cls-1" d="M38.771,58.327l-.279-.279c-.919-.919-.351-2.028.211-2.8-.253-.061-.549-.137-.9-.233l.09-1.855a5.7,5.7,0,0,0,3.762-2.436c-.478-.6-.793-2.114,4.926-7.832l1.16-1.16,2.668,9.782-.553.384A32.485,32.485,0,0,1,44.6,54.89c.84,1.045,1.077,1.831.791,2.523a1.563,1.563,0,0,1-1.464.914Z" transform="translate(0)"/><path id="bPiece_6" class="cls-1" d="M51.541,49.085c-.379-.864-.777-1.619-1.128-2.286-.8-1.521-1.379-2.619-1.035-3.688a2.327,2.327,0,0,1,1.264-1.347c.459-.229.4-.843-.021-2.573a13.811,13.811,0,0,1-.506-3.24A2.445,2.445,0,0,1,52.726,33.2c1.515,0,3.662.811,6.313,1.871a11.3,11.3,0,0,0,2.344.675l1.216.2-.5,1.127a35.34,35.34,0,0,1-9.059,12.35l-.976.855Z" transform="translate(0)"/><path id="bPiece_5" class="cls-1" d="M60.97,34.233c-2.069,0-6.1-2.761-7.838-5.371-.727-1.091-1.157-1.8-.853-2.507a1.522,1.522,0,0,1,1.3-.8,2.591,2.591,0,0,0,1.58-.749c.641-.641.641-.641-.076-1.757a21.183,21.183,0,0,1-2.039-3.882,3.453,3.453,0,0,1,.01-3.3,3.4,3.4,0,0,1,3.023-1.233,11.437,11.437,0,0,1,2.373.288l3.905-3.255.546,1.049a23.4,23.4,0,0,1,1.962,15.318,41.07,41.07,0,0,1-1.216,4.934l-.186.593-.617.068a1.511,1.511,0,0,0-.634.153,1.684,1.684,0,0,1-1.236.458Z" transform="translate(0)"/><path id="bPiece_4" class="cls-1" d="M46.6,35.438c-1.948,0-4.19-1.226-5.673-2.037-.295-.161-.553-.3-.763-.407-1.261-.631-1.955-2.074-1.955-4.065a13.4,13.4,0,0,1,1.529-5.782c.814-1.629-.922-3.439-3.464-5.816-1.451-1.357-2.822-2.639-3.253-3.931a2.483,2.483,0,0,1,.348-2.318c1.137-1.577,4-2.149,5.644-2.149a3.255,3.255,0,0,1,2.188.577,1.147,1.147,0,0,0,.256.023,9.438,9.438,0,0,0,6.85-4.478,4.728,4.728,0,0,1,3.6-2.272l.315-.061.288.141a24.215,24.215,0,0,1,6.837,4.955l.9.944-1.176.571c-1.184.575-1.776,2.35-2.348,4.066-1.1,3.3-1.5,3.456-6.43,4.442-1.9.379-1.529,3.177-.75,7.4.463,2.51.941,5.106.545,7.087A3.418,3.418,0,0,1,46.6,35.438Z" transform="translate(0)"/><path id="bPiece_3" class="cls-1" d="M34.744,6.628a41.641,41.641,0,0,1-6.839-.642l-2.144-.361,1.72-1.33a31.067,31.067,0,0,1,4.592-3l.061-.031.065-.021A25.071,25.071,0,0,1,40.14,0a28.537,28.537,0,0,1,9.942,1.811L53.227,3l-3.3.642c-1.9.37-3.83.872-5.7,1.358a61.208,61.208,0,0,1-6.356,1.429A22.338,22.338,0,0,1,34.744,6.628Z" transform="translate(0)"/><path id="bPiece_2" class="cls-1" d="M38.856,35.344c-.626,0-1.353-.411-2.681-1.518s-3.576-1.674-6.669-1.674A44.457,44.457,0,0,0,19.948,33.4l-.815.184-.288-.784a33.419,33.419,0,0,1-1.565-5.73C15.311,15.914,22.554,8.23,27.046,4.643l.438-.349L28,4.507A4.327,4.327,0,0,1,29.954,5.9l.226.33L30.1,6.62c-.044.219-1.12,5.364-5.463,6.45-.446.111-.889.623-1.283,1.478-1.8,3.91-1.525,12.217-.953,13.36a1.188,1.188,0,0,0,.594.1c2.022,0,5.736-1.887,6.272-2.958.376-.751.376-3.224.376-5.406,0-2.592,0-5.273.524-6.848.128-.384.518-1.552,1.537-1.552,1.628,0,2.087,3.241,2.194,4.346.242.154.708.39,1.1.587,1.764.893,4.431,2.242,5.082,4.5a4.177,4.177,0,0,1-.573,3.388c-1.186,1.976-.366,5.247.176,7.411.441,1.757.683,2.725.156,3.4A1.219,1.219,0,0,1,38.856,35.344Z" transform="translate(0)"/><path id="bPiece_1" class="cls-1" d="M37.808,55.018c-.941-.262-1.8-.548-1.8-.548l-.128-.043-.111-.076a50.878,50.878,0,0,1-7.848-7.087l-.636-.7.691-.643a4.436,4.436,0,0,0,1.24-1.706c.42-1.258,1.124-1.522,1.642-1.522,1.2,0,2.089,1.4,3.558,3.719.648,1.024,1.382,2.185,2.178,3.246.256.341.64.748,1.014.748,1.27,0,3.222-3.454,4.647-5.976.444-.784.887-1.569,1.331-2.308a14.855,14.855,0,0,1,2.4-3.051c-.137-.023-1.237-.2-1.74-.281-3.158-.526-4.03-1.4-5.04-2.408-.889-.889-2-2-5.612-3.352a10.807,10.807,0,0,0-3.813-.651A21.766,21.766,0,0,0,20.728,34.8l-.905.442-.39-.929c-.207-.494-.4-1-.588-1.508l-.376-1.019,1.059-.239a46.388,46.388,0,0,1,9.978-1.295c3.551,0,6.2.711,7.888,2.115.267.222.49.4.676.539-.072-.314-.158-.655-.235-.965-.619-2.469-1.555-6.2.038-8.855a2.327,2.327,0,0,0,.376-1.879c-.421-1.458-2.642-2.582-4.112-3.325-1.318-.667-2.113-1.069-2.113-1.923a8.684,8.684,0,0,0-.262-1.607,40.322,40.322,0,0,0-.214,5.3c0,2.739,0,5.1-.577,6.258C30,27.839,25.462,29.914,23,29.914a2.31,2.31,0,0,1-2.3-1.155c-.927-1.855-1-10.818.927-15.006a4.087,4.087,0,0,1,2.55-2.53c2.516-.63,3.591-3.374,3.931-4.5a3.714,3.714,0,0,0-.827-.458l-1.5-.615,1.7-1.357.331-.257.412.07a39.9,39.9,0,0,0,6.522.614A20.471,20.471,0,0,0,37.6,4.539,60.105,60.105,0,0,0,43.75,3.152c1.9-.494,3.861-1,5.814-1.384l.265-.051.252.094c.829.311,1.648.666,2.434,1.052l2.538,1.248-2.776.541a3.006,3.006,0,0,0-2.262,1.255,11.139,11.139,0,0,1-8.554,5.53,2.1,2.1,0,0,1-1.541-.522l0,0a4.733,4.733,0,0,0-.9-.08c-1.507,0-3.513.546-4.1,1.359a.6.6,0,0,0-.086.6c.278.835,1.533,2.008,2.746,3.143,2.4,2.242,5.381,5.032,3.867,8.058-1.769,3.539-1.644,6.683-.426,7.292.228.114.507.267.825.441,1.234.674,3.3,1.8,4.76,1.8.68,0,1.348-.191,1.626-1.579.324-1.622-.121-4.035-.551-6.368-.764-4.142-1.629-8.838,2.249-9.613,4.22-.844,4.22-.844,5-3.177.7-2.091,1.417-4.252,3.323-5.177l.624-.3.48.5A21.346,21.346,0,0,1,62.9,12.709l.354.681-4.342,3.618-.485-.137a9.989,9.989,0,0,0-2.351-.34c-.737,0-1.278.148-1.446.4s-.106.812.181,1.53a19.3,19.3,0,0,0,1.872,3.558c.865,1.345,1.548,2.407-.178,4.134a4.325,4.325,0,0,1-2.1,1.178c.082.13.184.288.31.477,1.525,2.287,5.061,4.521,6.252,4.524a3.07,3.07,0,0,1,1.661-.6l1.451-.162-.437,1.393A38.8,38.8,0,0,1,62.1,37.067l-.3.673-.726-.119a13.148,13.148,0,0,1-2.744-.786C56.046,35.921,53.9,35.1,52.726,35.1c-.47,0-.706,0-.706.851a12.127,12.127,0,0,0,.452,2.792c.428,1.772.913,3.779-.979,4.725-.215.108-.291.193-.3.227a6.142,6.142,0,0,0,.907,2.217c.366.7.78,1.482,1.187,2.407l.281.638-.525.461a36.019,36.019,0,0,1-3.18,2.483l-1.107.767-1.973-7.233a20.392,20.392,0,0,0-3.406,4.381,1.666,1.666,0,0,1,.125,1.4c-.465,1.477-2.694,3.363-5.271,3.818l-.213.038ZM27.559,25a21.326,21.326,0,0,1,2.882-14.059c-3.465,2.727-7.247,7.3-6.617,14.059Z" transform="translate(0)"/></g><g id="turtleMain"><path id="turtleBody" class="cls-1" d="M103.914,147.832a37.959,37.959,0,0,0-6.666-6.665s-1.9-2.857-6.665-1.905-9.522,2.857-7.617.953,1.9-2.857-.953-2.857c-.952,0-17.139-15.235-27.613-17.139s-11.426-2.857-19.043-2.857c0,0-17.14-.952-31.422,19.044,0,0-4.761.952-3.809,3.809s7.617,7.617,5.713,10.474-6.665,8.569-3.809,11.426S16.313,156.4,16.313,156.4s17.139,11.426,39.039.952c0,0,1.905,0,1.905,3.809s-.952,10.474,1.9,10.474,9.522-11.427,9.522-11.427,3.809-3.808.952-6.665c0,0-1.9-1.9-.952-2.856s6.665-5.713,10.474-.953,3.809,6.666,9.522,6.666,13.33-2.857,13.33-2.857S106.77,151.641,103.914,147.832Zm-99.027-8.57s24.756,34.279,72.366,0C77.253,139.262,32.5,180.206,4.887,139.262Zm88.077,11.427a4.285,4.285,0,1,1,4.284-4.285A4.285,4.285,0,0,1,92.964,150.689Z" transform="translate(0)"/><circle id="eyeballMain" class="cls-1" cx="94.392" cy="145.928" r="0.952"/></g></svg>
</div>
<!-- POW -->
<div class="pop">
<svg id="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.251 373.053"><defs><style>.cls-1{fill:#ed2f2f;}</style></defs><title>pop</title><g id="letterHole"><path class="cls-1" d="M220.443,178.854c0-.954,0-1.871.024-2.806a12.231,12.231,0,0,1,3.405-.7c.088,0,.165,0,.232.007a9.469,9.469,0,0,1-2.129,2.623,15.561,15.561,0,0,1-1.532,1.409Z"/><path d="M223.872,173.387a17.568,17.568,0,0,0-5.312,1.232c-.078,1.463-.078,2.849-.078,4.235v4.157a19,19,0,0,0,4.851-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.77-1.617-2.31-1.617Z"/></g><g id="letterHole2"><path class="cls-1" d="M185.6,202.994a5.2,5.2,0,0,1-4.975-2.978,13.791,13.791,0,0,1-1.3-7.053,29.148,29.148,0,0,1,2.318-9.742c1.072-2.529,2.863-5.563,5.27-5.563,1.763,0,3.206,1.741,4.29,5.174a27.584,27.584,0,0,1,1.22,9.251,16.944,16.944,0,0,1-1.916,7.463C188.859,202.6,187.021,202.994,185.6,202.994Z"/><path d="M186.912,179.619c.729,0,1.7,1.529,2.406,3.757a25.656,25.656,0,0,1,1.145,8.608,15.057,15.057,0,0,1-1.691,6.646c-1.194,2.217-2.262,2.4-3.168,2.4a3.247,3.247,0,0,1-3.233-1.92,11.947,11.947,0,0,1-1.087-6.067A27.1,27.1,0,0,1,183.441,184c1.145-2.7,2.476-4.384,3.471-4.384m0-3.922c-2.771,0-5.158,2.233-7.083,6.775a30.95,30.95,0,0,0-2.464,10.395,15.692,15.692,0,0,0,1.54,8.084,7.122,7.122,0,0,0,6.7,4c2.848,0,5-1.463,6.622-4.466a18.974,18.974,0,0,0,2.155-8.315,29.434,29.434,0,0,0-1.309-9.933c-1.385-4.388-3.465-6.544-6.16-6.544Z"/></g><g id="letterHole3"><path class="cls-1" d="M147.681,178.854c0-.954,0-1.871.023-2.806a12.237,12.237,0,0,1,3.405-.7c.088,0,.165,0,.233.007a9.5,9.5,0,0,1-2.13,2.623,15.419,15.419,0,0,1-1.531,1.408Z"/><path d="M151.109,173.387a17.586,17.586,0,0,0-5.313,1.232c-.076,1.463-.076,2.849-.076,4.235v4.157a19.012,19.012,0,0,0,4.85-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.771-1.617-2.31-1.617Z"/></g><g id="full"><path class="cls-1" d="M196.125,281.119l-58.461,85.333,2.861-103.4L43.071,297.727l63.092-81.97L6.94,186.526l99.223-29.23L43.071,75.326,140.525,110,137.664,6.6l58.461,85.333L254.587,6.6,251.726,110l97.453-34.674-63.09,81.97,99.222,29.23-99.223,29.231,63.091,81.97-97.453-34.674,2.861,103.4Zm52.493-78.044a13.514,13.514,0,0,0-1.477.085,12.807,12.807,0,0,0-6.6,3,8.95,8.95,0,0,0-3.224,6.8,6.883,6.883,0,0,0,3.615,6.327,9.169,9.169,0,0,0,4.949,1.369,12.26,12.26,0,0,0,1.769-.134,13.325,13.325,0,0,0,6.49-2.881,8.808,8.808,0,0,0,3.344-6.837,7.092,7.092,0,0,0-3.636-6.295A9.641,9.641,0,0,0,248.618,203.075Zm-84.57-24.557a47.259,47.259,0,0,0-1.193,8.718,43.558,43.558,0,0,0,3.716,20.148c3.635,8.116,9.081,12.236,16.184,12.236,6.906,0,12.664-4.043,17.112-12.016a46.244,46.244,0,0,0,5.712-20.171,43.941,43.941,0,0,0-3.711-20.161c-3.639-8.126-9.087-12.247-16.187-12.247-6.957,0-12.741,4.043-17.19,12.017a44.035,44.035,0,0,0-2.729,5.858,19.435,19.435,0,0,0,.243-3.055,21.653,21.653,0,0,0-.418-3.981c-.781-3.97-3.763-8.683-13.554-8.683-5.192,0-11.538,1.225-18.862,3.641l-1.437.474.093,1.51c.441,7.1.979,16.388,1.229,25.189l.54,17.867c.147,5.4.3,8.845.387,10.156l.162,2.449L149.212,214l-.154-1.608c-.511-5.328-.873-10.534-1.1-15.882C156.073,190.332,161.406,184.383,164.048,178.518ZM224.8,157.181c-5.192,0-11.537,1.225-18.862,3.641l-1.437.474.093,1.51c.44,7.1.977,16.382,1.229,25.189l.54,17.867c.148,5.419.3,8.86.388,10.158l.163,2.446L221.975,214l-.155-1.608c-.511-5.333-.873-10.539-1.1-15.882,12.145-9.237,18.053-17.967,18.053-26.664a21.747,21.747,0,0,0-.418-3.98C237.568,161.894,234.586,157.181,224.8,157.181Zm16.222,41.393,14.535.738.15-1.9a106.2,106.2,0,0,1,2.945-18.217c.858-3.427,2.581-9.034,5.431-17.666l.722-2.185-20.628-3.324Z"/><path d="M252.442,13.2l-2.6,93.882-.158,5.724,5.394-1.919,88.485-31.482L286.28,153.831l-3.492,4.537,5.492,1.618,90.09,26.54-90.09,26.541-5.492,1.618,3.492,4.537,57.285,74.425L255.08,262.165l-5.394-1.919.158,5.723,2.6,93.883-53.081-77.48-3.236-4.723-3.235,4.723-53.081,77.48,2.6-93.883.158-5.723-5.394,1.919L48.686,293.647l57.285-74.425,3.492-4.537-5.492-1.618-90.09-26.541,90.09-26.54,5.492-1.618-3.492-4.537L48.686,79.406l88.485,31.482,5.394,1.919-.158-5.724-2.6-93.882,53.081,77.48,3.235,4.723,3.236-4.723L252.442,13.2M167.407,165c-.906-3.86-4.131-9.779-15.374-9.779-5.4,0-11.954,1.258-19.477,3.74l-2.873.947.187,3.02c.439,7.089.976,16.352,1.226,25.131l.539,17.852c.149,5.432.3,8.909.391,10.237l.323,4.9,4.706-1.4,11.166-3.31,3.1-.919-.309-3.216c-.475-4.955-.821-9.805-1.052-14.763A67.918,67.918,0,0,0,160.9,187.085l0,.064a45.468,45.468,0,0,0,3.881,21.027c4.962,11.08,12.515,13.406,17.978,13.406,7.671,0,14-4.382,18.824-13.021a46.325,46.325,0,0,0,2.725-5.787l.094,3.136c.149,5.452.3,8.924.392,10.24l.327,4.894,4.7-1.4,11.164-3.31,3.1-.919-.308-3.216c-.476-4.96-.822-9.809-1.052-14.762,12.113-9.409,18.009-18.451,18.009-27.6a23.746,23.746,0,0,0-.459-4.377c-.753-3.827-3.766-10.248-15.475-10.248-5.4,0-11.953,1.258-19.477,3.739l-2.873.948.187,3.02q.049.8.1,1.633c-4.942-9.442-11.92-11.5-17.052-11.5-7.392,0-13.535,4.014-18.274,11.935m89.949,36.368.3-3.8a104.3,104.3,0,0,1,2.9-17.914c.841-3.361,2.553-8.924,5.387-17.509l1.442-4.37-4.543-.732L246.6,154.423l-4.22-.68-.316,4.263-2.849,38.421-.3,4,4.01.2,10.626.539,3.807.194m-17.466,19.59a11.316,11.316,0,0,0,5.986,1.664,14.133,14.133,0,0,0,2.058-.157,15.243,15.243,0,0,0,7.435-3.3l.053-.043.051-.045a10.782,10.782,0,0,0,3.968-8.273,9.064,9.064,0,0,0-4.551-7.953,11.709,11.709,0,0,0-6.272-1.74,15.5,15.5,0,0,0-1.695.1l-.07.008-.07.01a14.694,14.694,0,0,0-7.524,3.445l-.042.036-.041.037a10.943,10.943,0,0,0-3.826,8.216,8.856,8.856,0,0,0,4.54,7.994M256.732,0,196.125,88.464,135.519,0l2.967,107.192L37.457,71.247l65.405,84.976L0,186.526l102.862,30.3-65.4,84.977,101.029-35.945-2.967,107.192,60.606-88.464,60.607,88.464-2.967-107.192,101.029,35.945-65.4-84.977,102.862-30.3-102.862-30.3,65.4-84.976L253.765,107.192,256.732,0ZM182.755,217.659c-6.314,0-11.088-3.695-14.4-11.087a41.335,41.335,0,0,1-3.542-19.249A43.063,43.063,0,0,1,170.2,168c4.081-7.314,9.24-11.01,15.477-11.01s11.087,3.7,14.4,11.087a41.692,41.692,0,0,1,3.542,19.249,44.13,44.13,0,0,1-5.467,19.326c-4.081,7.315-9.163,11.01-15.4,11.01Zm70.993-20.4-10.626-.539,2.849-38.421,16.246,2.618c-2.695,8.161-4.542,14.09-5.467,17.786a107.346,107.346,0,0,0-3,18.556ZM208.7,215.889c-.077-1.155-.231-4.466-.385-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.238-2.388,13.32-3.542,18.248-3.542,6.852,0,10.7,2.386,11.627,7.083a20.05,20.05,0,0,1,.385,3.619c0,8.161-6.006,16.708-18.094,25.717.23,5.774.615,11.395,1.154,17.016L208.7,215.889Zm-72.764,0c-.076-1.155-.23-4.466-.384-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.237-2.388,13.32-3.542,18.248-3.542,6.853,0,10.7,2.386,11.626,7.083a19.872,19.872,0,0,1,.385,3.619c0,8.161-6.005,16.708-18.094,25.717.232,5.774.616,11.395,1.155,17.016l-11.165,3.311ZM245.876,218.7a7.345,7.345,0,0,1-3.985-1.116,4.922,4.922,0,0,1-2.619-4.619,7.007,7.007,0,0,1,2.541-5.313,10.794,10.794,0,0,1,5.544-2.541,11.449,11.449,0,0,1,1.261-.073,7.726,7.726,0,0,1,4.205,1.152,5.15,5.15,0,0,1,2.7,4.619,6.841,6.841,0,0,1-2.619,5.312,11.34,11.34,0,0,1-5.543,2.465,10.061,10.061,0,0,1-1.481.114Z"/></g></svg>
</div>
</div>
</div>
Put to SVGs in the same wrapping element. Hide one, show the other using CSS, then swap the class name for the POP.
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1".../></svg>
<svg id="Pop1" class="hideme" data-name="Pop_1".../></svg>
</div>
.hideme { display:none }
You can add pop div into the theTurtle div and add below css changes.
.theTurtle{
position:relative;
}
.pop {
position: absolute;
opacity: 0;
top: 0;
left: 50px;
width: 100px;
transform: translateX(0vw) translateY(0vw);
animation: pow 1s linear 19s 1 none;
}
I have changed top to -10px and left to 50px of .pop class style.
See the Snippet below:
html {
box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
overflow:hidden;
width: 100vw;
height: 100vh;
}
.BalloonContainer {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.flying img {
max-width: 150px;
position: absolute;
top: 20px;
transform: translateX(-30vw);
animation: moveBird 2s linear 16.9s 1 forwards;
}
#-webkit-keyframes moveBird {
0% {
transform: translateX(-30vw) rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: translateX(45vw) rotate(3deg);
}
}
.initialBalloon {
position: absolute;
/* moves initial position before animating */
transform: translateX(100vw);
top: 150px;
animation: moveFirst 2s linear .2s 1;
width: 150px;
}
.firstBalloon {
position: absolute;
transform: translateX(-30vw);
top: 150px;
animation: move 5s linear 5s infinite;
width: 150px;
}
.secondBalloon {
position: absolute;
transform: translateX(-30vw);
top: 200px;
animation: move 8s linear 0s infinite;
width: 150px;
}
.thirdBalloon {
top: 250px;
transform: translateX(-30vw);
position: absolute;
animation: move 11s linear 1s infinite;
width: 150px;
}
.turtle {
position: absolute;
top: 50px;
transform: translateX(-50vw);
opacity: 1;
animation: moveTurtle 5s linear 1s 1 none,
moveTurtleStop 11s linear 6s 1 forwards,
moveTurtleRotate 5s linear 17s infinite forwards,
hideOpacity 1s linear 19s 1 forwards;
width: 250px;
}
.theTurtle{
position:relative;
}
.pop {
position: absolute;
opacity: 0;
top: -10px;
left: 50px;
width: 100px;
transform: translateX(0vw) translateY(0vw);
animation: pow 1s linear 19s 1 none;
}
#-webkit-keyframes pow {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes hideOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes moveTurtle {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleRotate {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(50vw) rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes moveTurtleStop {
0% {
transform: translateX(-50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(50vw) rotate(10deg);
}
}
#-webkit-keyframes move {
0% {
transform: translateX(-30vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(75vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#keyframes fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
#-webkit-keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<div class="BalloonContainer">
<div class="flying">
<img src="https://williamcunningham.me/happy_birthday_2019/img/flyNew.gif" alt="">
</div>
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_1</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="firstBalloon swingimage">
<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_2</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="secondBalloon swingimage">
<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_3</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="thirdBalloon swingimage">
<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1{fill:#606060;}</style></defs><title>Balloon_4</title><path class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Zm-4,25h-6c-2-14,13-20,13-20C8.34,14.26,11.34,26.26,11.34,26.26Z" transform="translate(0 0)"/><polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26"/></svg>
</div>
<div class="theTurtle">
<div class="turtle swingimage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.826 171.637"><defs><style>.cls-1{fill:#171618;}</style></defs><title>turtleandBalloon</title><g id="balloonTotalMain"><polygon id="stringMain" class="cls-1" points="38.5 121.946 40.57 53.946 41.734 53.946 42.5 121.946 38.5 121.946"/><path id="bPiece_8" class="cls-1" d="M37.608,52.314a3.2,3.2,0,0,1-2.537-1.509c-.841-1.122-1.6-2.316-2.265-3.37a24.353,24.353,0,0,0-1.788-2.6,6.229,6.229,0,0,1-1.745,2.484l-.7.654-.648-.71a45.517,45.517,0,0,1-8.488-12.955l-.348-.83.809-.394a23.644,23.644,0,0,1,9.887-2.607,12.738,12.738,0,0,1,4.482.772c4,1.5,5.27,2.77,6.29,3.79.873.873,1.45,1.45,4.006,1.876.5.083.929.151,1.3.21,1.876.3,2.508.4,2.745,1.171.221.72-.294,1.2-.839,1.713a13.461,13.461,0,0,0-2.547,3.1c-.435.725-.871,1.5-1.306,2.266C41.9,48.942,39.989,52.314,37.608,52.314Z" transform="translate(0)"/><path id="bPiece_7" class="cls-1" d="M38.771,58.327l-.279-.279c-.919-.919-.351-2.028.211-2.8-.253-.061-.549-.137-.9-.233l.09-1.855a5.7,5.7,0,0,0,3.762-2.436c-.478-.6-.793-2.114,4.926-7.832l1.16-1.16,2.668,9.782-.553.384A32.485,32.485,0,0,1,44.6,54.89c.84,1.045,1.077,1.831.791,2.523a1.563,1.563,0,0,1-1.464.914Z" transform="translate(0)"/><path id="bPiece_6" class="cls-1" d="M51.541,49.085c-.379-.864-.777-1.619-1.128-2.286-.8-1.521-1.379-2.619-1.035-3.688a2.327,2.327,0,0,1,1.264-1.347c.459-.229.4-.843-.021-2.573a13.811,13.811,0,0,1-.506-3.24A2.445,2.445,0,0,1,52.726,33.2c1.515,0,3.662.811,6.313,1.871a11.3,11.3,0,0,0,2.344.675l1.216.2-.5,1.127a35.34,35.34,0,0,1-9.059,12.35l-.976.855Z" transform="translate(0)"/><path id="bPiece_5" class="cls-1" d="M60.97,34.233c-2.069,0-6.1-2.761-7.838-5.371-.727-1.091-1.157-1.8-.853-2.507a1.522,1.522,0,0,1,1.3-.8,2.591,2.591,0,0,0,1.58-.749c.641-.641.641-.641-.076-1.757a21.183,21.183,0,0,1-2.039-3.882,3.453,3.453,0,0,1,.01-3.3,3.4,3.4,0,0,1,3.023-1.233,11.437,11.437,0,0,1,2.373.288l3.905-3.255.546,1.049a23.4,23.4,0,0,1,1.962,15.318,41.07,41.07,0,0,1-1.216,4.934l-.186.593-.617.068a1.511,1.511,0,0,0-.634.153,1.684,1.684,0,0,1-1.236.458Z" transform="translate(0)"/><path id="bPiece_4" class="cls-1" d="M46.6,35.438c-1.948,0-4.19-1.226-5.673-2.037-.295-.161-.553-.3-.763-.407-1.261-.631-1.955-2.074-1.955-4.065a13.4,13.4,0,0,1,1.529-5.782c.814-1.629-.922-3.439-3.464-5.816-1.451-1.357-2.822-2.639-3.253-3.931a2.483,2.483,0,0,1,.348-2.318c1.137-1.577,4-2.149,5.644-2.149a3.255,3.255,0,0,1,2.188.577,1.147,1.147,0,0,0,.256.023,9.438,9.438,0,0,0,6.85-4.478,4.728,4.728,0,0,1,3.6-2.272l.315-.061.288.141a24.215,24.215,0,0,1,6.837,4.955l.9.944-1.176.571c-1.184.575-1.776,2.35-2.348,4.066-1.1,3.3-1.5,3.456-6.43,4.442-1.9.379-1.529,3.177-.75,7.4.463,2.51.941,5.106.545,7.087A3.418,3.418,0,0,1,46.6,35.438Z" transform="translate(0)"/><path id="bPiece_3" class="cls-1" d="M34.744,6.628a41.641,41.641,0,0,1-6.839-.642l-2.144-.361,1.72-1.33a31.067,31.067,0,0,1,4.592-3l.061-.031.065-.021A25.071,25.071,0,0,1,40.14,0a28.537,28.537,0,0,1,9.942,1.811L53.227,3l-3.3.642c-1.9.37-3.83.872-5.7,1.358a61.208,61.208,0,0,1-6.356,1.429A22.338,22.338,0,0,1,34.744,6.628Z" transform="translate(0)"/><path id="bPiece_2" class="cls-1" d="M38.856,35.344c-.626,0-1.353-.411-2.681-1.518s-3.576-1.674-6.669-1.674A44.457,44.457,0,0,0,19.948,33.4l-.815.184-.288-.784a33.419,33.419,0,0,1-1.565-5.73C15.311,15.914,22.554,8.23,27.046,4.643l.438-.349L28,4.507A4.327,4.327,0,0,1,29.954,5.9l.226.33L30.1,6.62c-.044.219-1.12,5.364-5.463,6.45-.446.111-.889.623-1.283,1.478-1.8,3.91-1.525,12.217-.953,13.36a1.188,1.188,0,0,0,.594.1c2.022,0,5.736-1.887,6.272-2.958.376-.751.376-3.224.376-5.406,0-2.592,0-5.273.524-6.848.128-.384.518-1.552,1.537-1.552,1.628,0,2.087,3.241,2.194,4.346.242.154.708.39,1.1.587,1.764.893,4.431,2.242,5.082,4.5a4.177,4.177,0,0,1-.573,3.388c-1.186,1.976-.366,5.247.176,7.411.441,1.757.683,2.725.156,3.4A1.219,1.219,0,0,1,38.856,35.344Z" transform="translate(0)"/><path id="bPiece_1" class="cls-1" d="M37.808,55.018c-.941-.262-1.8-.548-1.8-.548l-.128-.043-.111-.076a50.878,50.878,0,0,1-7.848-7.087l-.636-.7.691-.643a4.436,4.436,0,0,0,1.24-1.706c.42-1.258,1.124-1.522,1.642-1.522,1.2,0,2.089,1.4,3.558,3.719.648,1.024,1.382,2.185,2.178,3.246.256.341.64.748,1.014.748,1.27,0,3.222-3.454,4.647-5.976.444-.784.887-1.569,1.331-2.308a14.855,14.855,0,0,1,2.4-3.051c-.137-.023-1.237-.2-1.74-.281-3.158-.526-4.03-1.4-5.04-2.408-.889-.889-2-2-5.612-3.352a10.807,10.807,0,0,0-3.813-.651A21.766,21.766,0,0,0,20.728,34.8l-.905.442-.39-.929c-.207-.494-.4-1-.588-1.508l-.376-1.019,1.059-.239a46.388,46.388,0,0,1,9.978-1.295c3.551,0,6.2.711,7.888,2.115.267.222.49.4.676.539-.072-.314-.158-.655-.235-.965-.619-2.469-1.555-6.2.038-8.855a2.327,2.327,0,0,0,.376-1.879c-.421-1.458-2.642-2.582-4.112-3.325-1.318-.667-2.113-1.069-2.113-1.923a8.684,8.684,0,0,0-.262-1.607,40.322,40.322,0,0,0-.214,5.3c0,2.739,0,5.1-.577,6.258C30,27.839,25.462,29.914,23,29.914a2.31,2.31,0,0,1-2.3-1.155c-.927-1.855-1-10.818.927-15.006a4.087,4.087,0,0,1,2.55-2.53c2.516-.63,3.591-3.374,3.931-4.5a3.714,3.714,0,0,0-.827-.458l-1.5-.615,1.7-1.357.331-.257.412.07a39.9,39.9,0,0,0,6.522.614A20.471,20.471,0,0,0,37.6,4.539,60.105,60.105,0,0,0,43.75,3.152c1.9-.494,3.861-1,5.814-1.384l.265-.051.252.094c.829.311,1.648.666,2.434,1.052l2.538,1.248-2.776.541a3.006,3.006,0,0,0-2.262,1.255,11.139,11.139,0,0,1-8.554,5.53,2.1,2.1,0,0,1-1.541-.522l0,0a4.733,4.733,0,0,0-.9-.08c-1.507,0-3.513.546-4.1,1.359a.6.6,0,0,0-.086.6c.278.835,1.533,2.008,2.746,3.143,2.4,2.242,5.381,5.032,3.867,8.058-1.769,3.539-1.644,6.683-.426,7.292.228.114.507.267.825.441,1.234.674,3.3,1.8,4.76,1.8.68,0,1.348-.191,1.626-1.579.324-1.622-.121-4.035-.551-6.368-.764-4.142-1.629-8.838,2.249-9.613,4.22-.844,4.22-.844,5-3.177.7-2.091,1.417-4.252,3.323-5.177l.624-.3.48.5A21.346,21.346,0,0,1,62.9,12.709l.354.681-4.342,3.618-.485-.137a9.989,9.989,0,0,0-2.351-.34c-.737,0-1.278.148-1.446.4s-.106.812.181,1.53a19.3,19.3,0,0,0,1.872,3.558c.865,1.345,1.548,2.407-.178,4.134a4.325,4.325,0,0,1-2.1,1.178c.082.13.184.288.31.477,1.525,2.287,5.061,4.521,6.252,4.524a3.07,3.07,0,0,1,1.661-.6l1.451-.162-.437,1.393A38.8,38.8,0,0,1,62.1,37.067l-.3.673-.726-.119a13.148,13.148,0,0,1-2.744-.786C56.046,35.921,53.9,35.1,52.726,35.1c-.47,0-.706,0-.706.851a12.127,12.127,0,0,0,.452,2.792c.428,1.772.913,3.779-.979,4.725-.215.108-.291.193-.3.227a6.142,6.142,0,0,0,.907,2.217c.366.7.78,1.482,1.187,2.407l.281.638-.525.461a36.019,36.019,0,0,1-3.18,2.483l-1.107.767-1.973-7.233a20.392,20.392,0,0,0-3.406,4.381,1.666,1.666,0,0,1,.125,1.4c-.465,1.477-2.694,3.363-5.271,3.818l-.213.038ZM27.559,25a21.326,21.326,0,0,1,2.882-14.059c-3.465,2.727-7.247,7.3-6.617,14.059Z" transform="translate(0)"/></g><g id="turtleMain"><path id="turtleBody" class="cls-1" d="M103.914,147.832a37.959,37.959,0,0,0-6.666-6.665s-1.9-2.857-6.665-1.905-9.522,2.857-7.617.953,1.9-2.857-.953-2.857c-.952,0-17.139-15.235-27.613-17.139s-11.426-2.857-19.043-2.857c0,0-17.14-.952-31.422,19.044,0,0-4.761.952-3.809,3.809s7.617,7.617,5.713,10.474-6.665,8.569-3.809,11.426S16.313,156.4,16.313,156.4s17.139,11.426,39.039.952c0,0,1.905,0,1.905,3.809s-.952,10.474,1.9,10.474,9.522-11.427,9.522-11.427,3.809-3.808.952-6.665c0,0-1.9-1.9-.952-2.856s6.665-5.713,10.474-.953,3.809,6.666,9.522,6.666,13.33-2.857,13.33-2.857S106.77,151.641,103.914,147.832Zm-99.027-8.57s24.756,34.279,72.366,0C77.253,139.262,32.5,180.206,4.887,139.262Zm88.077,11.427a4.285,4.285,0,1,1,4.284-4.285A4.285,4.285,0,0,1,92.964,150.689Z" transform="translate(0)"/><circle id="eyeballMain" class="cls-1" cx="94.392" cy="145.928" r="0.952"/></g></svg>
<div class="pop">
<svg id="pop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.251 373.053"><defs><style>.cls-1{fill:#ed2f2f;}</style></defs><title>pop</title><g id="letterHole"><path class="cls-1" d="M220.443,178.854c0-.954,0-1.871.024-2.806a12.231,12.231,0,0,1,3.405-.7c.088,0,.165,0,.232.007a9.469,9.469,0,0,1-2.129,2.623,15.561,15.561,0,0,1-1.532,1.409Z"/><path d="M223.872,173.387a17.568,17.568,0,0,0-5.312,1.232c-.078,1.463-.078,2.849-.078,4.235v4.157a19,19,0,0,0,4.851-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.77-1.617-2.31-1.617Z"/></g><g id="letterHole2"><path class="cls-1" d="M185.6,202.994a5.2,5.2,0,0,1-4.975-2.978,13.791,13.791,0,0,1-1.3-7.053,29.148,29.148,0,0,1,2.318-9.742c1.072-2.529,2.863-5.563,5.27-5.563,1.763,0,3.206,1.741,4.29,5.174a27.584,27.584,0,0,1,1.22,9.251,16.944,16.944,0,0,1-1.916,7.463C188.859,202.6,187.021,202.994,185.6,202.994Z"/><path d="M186.912,179.619c.729,0,1.7,1.529,2.406,3.757a25.656,25.656,0,0,1,1.145,8.608,15.057,15.057,0,0,1-1.691,6.646c-1.194,2.217-2.262,2.4-3.168,2.4a3.247,3.247,0,0,1-3.233-1.92,11.947,11.947,0,0,1-1.087-6.067A27.1,27.1,0,0,1,183.441,184c1.145-2.7,2.476-4.384,3.471-4.384m0-3.922c-2.771,0-5.158,2.233-7.083,6.775a30.95,30.95,0,0,0-2.464,10.395,15.692,15.692,0,0,0,1.54,8.084,7.122,7.122,0,0,0,6.7,4c2.848,0,5-1.463,6.622-4.466a18.974,18.974,0,0,0,2.155-8.315,29.434,29.434,0,0,0-1.309-9.933c-1.385-4.388-3.465-6.544-6.16-6.544Z"/></g><g id="letterHole3"><path class="cls-1" d="M147.681,178.854c0-.954,0-1.871.023-2.806a12.237,12.237,0,0,1,3.405-.7c.088,0,.165,0,.233.007a9.5,9.5,0,0,1-2.13,2.623,15.419,15.419,0,0,1-1.531,1.408Z"/><path d="M151.109,173.387a17.586,17.586,0,0,0-5.313,1.232c-.076,1.463-.076,2.849-.076,4.235v4.157a19.012,19.012,0,0,0,4.85-3.618c1.925-1.848,2.849-3.311,2.849-4.389s-.771-1.617-2.31-1.617Z"/></g><g id="full"><path class="cls-1" d="M196.125,281.119l-58.461,85.333,2.861-103.4L43.071,297.727l63.092-81.97L6.94,186.526l99.223-29.23L43.071,75.326,140.525,110,137.664,6.6l58.461,85.333L254.587,6.6,251.726,110l97.453-34.674-63.09,81.97,99.222,29.23-99.223,29.231,63.091,81.97-97.453-34.674,2.861,103.4Zm52.493-78.044a13.514,13.514,0,0,0-1.477.085,12.807,12.807,0,0,0-6.6,3,8.95,8.95,0,0,0-3.224,6.8,6.883,6.883,0,0,0,3.615,6.327,9.169,9.169,0,0,0,4.949,1.369,12.26,12.26,0,0,0,1.769-.134,13.325,13.325,0,0,0,6.49-2.881,8.808,8.808,0,0,0,3.344-6.837,7.092,7.092,0,0,0-3.636-6.295A9.641,9.641,0,0,0,248.618,203.075Zm-84.57-24.557a47.259,47.259,0,0,0-1.193,8.718,43.558,43.558,0,0,0,3.716,20.148c3.635,8.116,9.081,12.236,16.184,12.236,6.906,0,12.664-4.043,17.112-12.016a46.244,46.244,0,0,0,5.712-20.171,43.941,43.941,0,0,0-3.711-20.161c-3.639-8.126-9.087-12.247-16.187-12.247-6.957,0-12.741,4.043-17.19,12.017a44.035,44.035,0,0,0-2.729,5.858,19.435,19.435,0,0,0,.243-3.055,21.653,21.653,0,0,0-.418-3.981c-.781-3.97-3.763-8.683-13.554-8.683-5.192,0-11.538,1.225-18.862,3.641l-1.437.474.093,1.51c.441,7.1.979,16.388,1.229,25.189l.54,17.867c.147,5.4.3,8.845.387,10.156l.162,2.449L149.212,214l-.154-1.608c-.511-5.328-.873-10.534-1.1-15.882C156.073,190.332,161.406,184.383,164.048,178.518ZM224.8,157.181c-5.192,0-11.537,1.225-18.862,3.641l-1.437.474.093,1.51c.44,7.1.977,16.382,1.229,25.189l.54,17.867c.148,5.419.3,8.86.388,10.158l.163,2.446L221.975,214l-.155-1.608c-.511-5.333-.873-10.539-1.1-15.882,12.145-9.237,18.053-17.967,18.053-26.664a21.747,21.747,0,0,0-.418-3.98C237.568,161.894,234.586,157.181,224.8,157.181Zm16.222,41.393,14.535.738.15-1.9a106.2,106.2,0,0,1,2.945-18.217c.858-3.427,2.581-9.034,5.431-17.666l.722-2.185-20.628-3.324Z"/><path d="M252.442,13.2l-2.6,93.882-.158,5.724,5.394-1.919,88.485-31.482L286.28,153.831l-3.492,4.537,5.492,1.618,90.09,26.54-90.09,26.541-5.492,1.618,3.492,4.537,57.285,74.425L255.08,262.165l-5.394-1.919.158,5.723,2.6,93.883-53.081-77.48-3.236-4.723-3.235,4.723-53.081,77.48,2.6-93.883.158-5.723-5.394,1.919L48.686,293.647l57.285-74.425,3.492-4.537-5.492-1.618-90.09-26.541,90.09-26.54,5.492-1.618-3.492-4.537L48.686,79.406l88.485,31.482,5.394,1.919-.158-5.724-2.6-93.882,53.081,77.48,3.235,4.723,3.236-4.723L252.442,13.2M167.407,165c-.906-3.86-4.131-9.779-15.374-9.779-5.4,0-11.954,1.258-19.477,3.74l-2.873.947.187,3.02c.439,7.089.976,16.352,1.226,25.131l.539,17.852c.149,5.432.3,8.909.391,10.237l.323,4.9,4.706-1.4,11.166-3.31,3.1-.919-.309-3.216c-.475-4.955-.821-9.805-1.052-14.763A67.918,67.918,0,0,0,160.9,187.085l0,.064a45.468,45.468,0,0,0,3.881,21.027c4.962,11.08,12.515,13.406,17.978,13.406,7.671,0,14-4.382,18.824-13.021a46.325,46.325,0,0,0,2.725-5.787l.094,3.136c.149,5.452.3,8.924.392,10.24l.327,4.894,4.7-1.4,11.164-3.31,3.1-.919-.308-3.216c-.476-4.96-.822-9.809-1.052-14.762,12.113-9.409,18.009-18.451,18.009-27.6a23.746,23.746,0,0,0-.459-4.377c-.753-3.827-3.766-10.248-15.475-10.248-5.4,0-11.953,1.258-19.477,3.739l-2.873.948.187,3.02q.049.8.1,1.633c-4.942-9.442-11.92-11.5-17.052-11.5-7.392,0-13.535,4.014-18.274,11.935m89.949,36.368.3-3.8a104.3,104.3,0,0,1,2.9-17.914c.841-3.361,2.553-8.924,5.387-17.509l1.442-4.37-4.543-.732L246.6,154.423l-4.22-.68-.316,4.263-2.849,38.421-.3,4,4.01.2,10.626.539,3.807.194m-17.466,19.59a11.316,11.316,0,0,0,5.986,1.664,14.133,14.133,0,0,0,2.058-.157,15.243,15.243,0,0,0,7.435-3.3l.053-.043.051-.045a10.782,10.782,0,0,0,3.968-8.273,9.064,9.064,0,0,0-4.551-7.953,11.709,11.709,0,0,0-6.272-1.74,15.5,15.5,0,0,0-1.695.1l-.07.008-.07.01a14.694,14.694,0,0,0-7.524,3.445l-.042.036-.041.037a10.943,10.943,0,0,0-3.826,8.216,8.856,8.856,0,0,0,4.54,7.994M256.732,0,196.125,88.464,135.519,0l2.967,107.192L37.457,71.247l65.405,84.976L0,186.526l102.862,30.3-65.4,84.977,101.029-35.945-2.967,107.192,60.606-88.464,60.607,88.464-2.967-107.192,101.029,35.945-65.4-84.977,102.862-30.3-102.862-30.3,65.4-84.976L253.765,107.192,256.732,0ZM182.755,217.659c-6.314,0-11.088-3.695-14.4-11.087a41.335,41.335,0,0,1-3.542-19.249A43.063,43.063,0,0,1,170.2,168c4.081-7.314,9.24-11.01,15.477-11.01s11.087,3.7,14.4,11.087a41.692,41.692,0,0,1,3.542,19.249,44.13,44.13,0,0,1-5.467,19.326c-4.081,7.315-9.163,11.01-15.4,11.01Zm70.993-20.4-10.626-.539,2.849-38.421,16.246,2.618c-2.695,8.161-4.542,14.09-5.467,17.786a107.346,107.346,0,0,0-3,18.556ZM208.7,215.889c-.077-1.155-.231-4.466-.385-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.238-2.388,13.32-3.542,18.248-3.542,6.852,0,10.7,2.386,11.627,7.083a20.05,20.05,0,0,1,.385,3.619c0,8.161-6.006,16.708-18.094,25.717.23,5.774.615,11.395,1.154,17.016L208.7,215.889Zm-72.764,0c-.076-1.155-.23-4.466-.384-10.086l-.539-17.863c-.231-8.085-.693-16.555-1.232-25.255,7.237-2.388,13.32-3.542,18.248-3.542,6.853,0,10.7,2.386,11.626,7.083a19.872,19.872,0,0,1,.385,3.619c0,8.161-6.005,16.708-18.094,25.717.232,5.774.616,11.395,1.155,17.016l-11.165,3.311ZM245.876,218.7a7.345,7.345,0,0,1-3.985-1.116,4.922,4.922,0,0,1-2.619-4.619,7.007,7.007,0,0,1,2.541-5.313,10.794,10.794,0,0,1,5.544-2.541,11.449,11.449,0,0,1,1.261-.073,7.726,7.726,0,0,1,4.205,1.152,5.15,5.15,0,0,1,2.7,4.619,6.841,6.841,0,0,1-2.619,5.312,11.34,11.34,0,0,1-5.543,2.465,10.061,10.061,0,0,1-1.481.114Z"/></g></svg>
</div>
</div>
<!-- POW -->
</div>
</div>
Related
I have created this CodePen for a rotating border around a button and although the principle seems to be good, it is not working as it should - the rendering seems extremely slow and staggering (I have the M1 MacBook Pro).
.button {
width: 206px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
}
.button::after {
content: "";
border-radius: 35px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
clip-path: url(#mask);
border: 3px solid black;
}
.curve-1 {
animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ 20s infinite linear;
transform-origin: 35px center;
//animation-play-state: paused;
//transform: rotate(-315deg)
}
.curve-2 {
animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ 20s infinite linear;
transform-origin: 35px center;
translate: 136px 0;
}
.line {
animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ 20s infinite linear;
}
svg {
display: block;
}
#keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ {
0% {
transform: rotate(45deg);
}
22% {
transform: rotate(-135deg);
}
27% {
transform: rotate(-180deg);
}
88% {
transform: rotate(-180deg);
}
89% {
transform: rotate(-225deg);
}
100% {
transform: rotate(-315deg);
}
}
#keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ {
0% {
transform: rotate(0deg);
}
38% {
transform: rotate(0deg)
}
39% {
transform: rotate(-45deg);
}
50% {
transform: rotate(-135deg);
}
72% {
transform: rotate(-360deg);
}
100% {
transform: rotate(-360deg);
}
}
#keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ•̫͡•ʔ•̫͡•ʕ•̫͡•ʔ {
0%, 100% {
width: 0;
x: 35px;
y: 35px;
}
11% {
width: 0;
x: 35px;
y: 35px;
}
22% {
width: 55px;
x: 35px;
y: 35px;
}
39% {
width: 55px;
x: 116px;
y: 35px;
}
50% {
width: 0;
x: 171px;
y: 35px;
}
61% {
width: 0;
x: 171px;
y: 0;
}
72% {
width: 55px;
x: 116px;
y: 0;
}
89% {
width: 55px;
x: 35px;
y: 0;
}
100% {
width: 0;
x: 35px;
y: 0;
}
}
<div class="button">button text</div>
<svg view-box="0 0 206 70" width="206" height="70">
<defs>
<clipPath id="mask">
<path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-1"/>
<path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-2"/>
<rect fill="#000" height="35" class="line">
</clipPath>
</defs>
</svg>
<svg view-box="0 0 206 70" width="206" height="70">
<path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-1"/>
<path d="M10.2513 10.1652C3.73208 16.8036 0.103643 25.7716 0.165885 35.0968C0.228128 44.422 3.97596 53.3408 10.5832 59.8905L35.1651 34.8632L10.2513 10.1652Z" fill="#000" class="curve-2"/>
<rect fill="#000" height="35" class="line">
</svg>
Does anybody know anything about CSS rendering and why could this be happening?
I also created this CodePen where I just wanted to demonstrate that animating a clip-path is possible and it seems to work just fine here...
.masked {
width: 500px;
clip-path: url(#mask)
}
.mask {
width: 500px;
}
.circle {
animation: ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ 2s infinite;
}
#keyframes ʕ•̫͡•ʕ•̫͡•ʔ•̫͡•ʔ {
0% {
translate: 0;
}
50% {
translate: 40px;
}
100% {
translate: 100px;
}
}
<img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dHJlZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60" class="masked"/>
<svg viewport="0 0 100 60">
<circle cx="50" cy="30" r="20" class="circle">
</svg>
<svg width="0" height="0">
<defs>
<clipPath id="mask">
<circle cx="100" cy="100" r="40" class="circle" />
</clipPath>
</defs>
</svg>
I have no idea why this's happening, if anyone knows the answer, I would be glad.
Thanks
Why so complicated? The same animation can be achieved with the stroke-dasharray technique.
For me, the animation appears smooth. Whether it is the same for you depends probably on hardware, but I am far down from your computing power.
.button {
width: 206px;
height: 70px;
line-height: 70px;
text-align: center;
position: relative;
border: 3px solid transparent;
}
.button .line {
position: absolute;
overflow: visible;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: none;
stroke: black;
stroke-width: 3px;
stroke-dasharray: 10px 90px;
animation: around 20s linear infinite;
}
#keyframes around {
0% {
stroke-dashoffset: 100px;
}
100% {
stroke-dashoffset: 0px;
}
}
<div class="button">button text<svg class="line" view-box="0 0 206 70">
<path d="M35,-1.5 A 36.5 36.5 0 0 0 35,71.5 H 171 A 36.5 36.5 0 0 0 171,-1.5 Z" pathLength="100" />
</svg>
Here is my code https://codepen.io/victoreugen2002/pen/PoJJPzP
I am trying to animate the left and right svg, to acheive this:
both starting at the same time from the top and they continue drawing.
until they both met at the bottom in the middle.
In order to acheive this I am thinking of inversing the animation for left svg, but it's not working:
.left {
width: 50%;
stroke-dasharray: 1855.968505859375;
animation: dash 2s ease-in;
#keyframes dash {
from {
stroke-dashoffset: 1855.968505859375;
}
to {
stroke-dashoffset: 3710;
}
}
svg {
left: 0;
}
}
You had to go from -1855.968505859375 to 0.
.left {
width: 50%;
stroke-dasharray: 1855.968505859375;
animation: dash-left 2s ease-in;
}
.left svg {
left: 0;
}
.right {
width: 50%;
stroke-dasharray: 1855.968505859375;
animation: dash-right 2s ease-in;
}
.right svg {
right: 0;
}
svg {
position: absolute;
top: 20px;
width: 50%;
stroke-width: 5px;
}
#keyframes dash-left {
from { stroke-dashoffset: -1855.968505859375 }
to { stroke-dashoffset: 0 }
}
#keyframes dash-right {
from { stroke-dashoffset: 1855.968505859375 }
to { stroke-dashoffset: 0 }
}
<div class="left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 425">
<path d="M733,424.5H39A38.5,38.5,0,0,1,.5,386V39A38.5,38.5,0,0,1,39,.5H733" style="fill: none;stroke: #78be21"/>
</svg>
</div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 425">
<path d="M0,.5H694A38.5,38.5,0,0,1,732.5,39V386A38.5,38.5,0,0,1,694,424.5H0" style="fill: none;stroke: #78be21"/>
</svg>
</div>
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>
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>
I am learning about CSS animations and I'm a little stuck on something. I've got things mostly working but the first balloon is going backwards first and I do not understand why. I've tried a whole lot of different things, like changing the position translate with no success. Any thoughts? The class of the first balloon I am referring to is initialBalloon.
html {
box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
overflow:hidden;
width: 100vw;
height: 100vh;
}
.BalloonContainer {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.initialBalloon {
position: absolute;
/* moves initial position before animating */
transform: translateX(100vw);
top: 150px;
animation: moveFirst 5s linear .2s;
animation-iteration-count: 1;
width: 150px;
}
.firstBalloon {
position: absolute;
transform: translateX(-30vw);
top: 150px;
animation: move 5s linear 5s infinite;
width: 150px;
}
.secondBalloon {
position: absolute;
transform: translateX(-30vw);
top: 200px;
animation: move 8s linear 0s infinite;
width: 150px;
}
.thirdBalloon {
top: 250px;
transform: translateX(-30vw);
position: absolute;
animation: move 11s linear 1s infinite;
width: 150px;
}
#-webkit-keyframes move {
0% {
transform: translateX(-30vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
<div class="BalloonContainer">
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
</div>
<div class="firstBalloon swingimage">
<svg id="Balloon_2" data-name="Balloon_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_2p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_2" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
<polygon id="string_2" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
</div>
<div class="secondBalloon swingimage">
<svg id="Balloon_3" data-name="Balloon_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_3p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_3" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
<polygon id="string_3" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
</div>
<div class="thirdBalloon swingimage">
<svg id="Balloon_4" data-name="Balloon_4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_4p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_4" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
<polygon id="string_4" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
</div>
</div>
It seems to be going from 50vw to 0vw then to 100vw. Hence why it looks to be going backwards.
Adding translateX(75vw) (half way intbetween 50 and 100) to the 50% mark for the moveFirst animation class worked for me.
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(75vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
Try this changed example
just changed
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(70vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
html {
box-sizing:border-box;
}
*,
*:before,
*:after { /* allow all elements to inherit box-sizing */
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
overflow:hidden;
width: 100vw;
height: 100vh;
}
.BalloonContainer {
position: absolute;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.initialBalloon {
position: absolute;
/* moves initial position before animating */
transform: translateX(100vw);
top: 150px;
animation: moveFirst 5s linear .2s;
animation-iteration-count: 1;
width: 150px;
}
.firstBalloon {
position: absolute;
transform: translateX(-30vw);
top: 150px;
animation: move 5s linear 5s infinite;
width: 150px;
}
.secondBalloon {
position: absolute;
transform: translateX(-30vw);
top: 200px;
animation: move 8s linear 0s infinite;
width: 150px;
}
.thirdBalloon {
top: 250px;
transform: translateX(-30vw);
position: absolute;
animation: move 11s linear 1s infinite;
width: 150px;
}
#-webkit-keyframes move {
0% {
transform: translateX(-30vw) rotate(10deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
#-webkit-keyframes moveFirst {
0% {
transform: translateX(50vw) rotate(10deg);
}
50% {
transform: translateX(70vw) rotate(-5deg);
}
100% {
transform: translateX(100vw) rotate(10deg);
}
}
<div class="BalloonContainer">
<div class="initialBalloon swingimage">
<svg id="Balloon_1" data-name="Balloon_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.82 125.26"><defs><style>.cls-1 {fill: #171618;}.cls-2 {fill: #efefef;}</style></defs><title>ballon</title><path id="ballon_1p" class="cls-1" d="M15.34,1.26s-18,9-15,26,19,28,19,28a22.69,22.69,0,0,0,4,1c1,0-2,2-1,3h5s2,0-1-3c0,0,18-6,22-28S30.34-3.74,15.34,1.26Z" /><path id="highlight_1" class="cls-2" d="M18.34,6.26s-15,6-13,20h6S8.34,14.26,18.34,6.26Z" />
<polygon id="string_1" class="cls-1" points="22.34 125.26 24.41 57.26 25.57 57.26 26.34 125.26 22.34 125.26" /></svg>
</div>
</div>
I have a material loader, and I'm having difficulties figuring out how to enlarge the animation.
HTML & CSS:
.loading-directive {
position:relative;
clear:both;
top: 37px
}
.loading-directive .loader {
position:relative;
margin:0 auto;
width:65px;
height:64px;
zoom:1;
}
.loading-directive .circular {
-webkit-animation:loadingrotate 2s linear infinite;animation:loadingrotate 2s linear infinite;height:64px;position:relative;width:65px
}
.loading-directive .path {
stroke-dasharray:1,200;
stroke-dashoffset:0;
-webkit-animation:loadingdash 1.5s ease-in-out infinite;animation:loadingdash 1.5s ease-in-out infinite;
stroke-linecap:round;
stroke:#333333;
}
#-webkit-keyframes loadingrotate{
100%{
-webkit-transform:rotate(360deg);transform:rotate(360deg)
}
}
#keyframes loadingrotate{
100%{
-webkit-transform:rotate(360deg);transform:rotate(360deg)
}
}
#-webkit-keyframes loadingdash{
0%{
stroke-dasharray:1,200;stroke-dashoffset:0
}
50%{
stroke-dasharray:150,200;stroke-dashoffset:-50
}
100%{
stroke-dasharray:150,200;stroke-dashoffset:-185
}
}
#keyframes loadingdash{
0%{
stroke-dasharray:1,200;stroke-dashoffset:0
}
50%{
stroke-dasharray:150,200;stroke-dashoffset:-50
}
100%{
stroke-dasharray:150,200;stroke-dashoffset:-185
}
}
<div class="loading-directive" id="product-image-container" style="display: block;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>
Loader in question:
https://jsfiddle.net/012k581h/
I need the loader to be 25% larger than displayed here. What properties must be adjusted to achieve this?
You can use the the scale property using css
.loading-directive .loader {
position: relative;
margin: 0 auto;
width: 65px;
height: 64px;
zoom: 1;
transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
}
See snippet below
.loading-directive {
position: relative;
clear: both;
top: 37px
}
.loading-directive .loader {
position: relative;
margin: 0 auto;
width: 65px;
height: 64px;
zoom: 1;
transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
-ms-transform: scale(1.5, 1.5);
-o-transform: scale(1.5, 1.5);
}
.loading-directive .circular {
-webkit-animation: loadingrotate 2s linear infinite;
animation: loadingrotate 2s linear infinite;
height: 64px;
position: relative;
width: 65px
}
.loading-directive .path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: loadingdash 1.5s ease-in-out infinite;
animation: loadingdash 1.5s ease-in-out infinite;
stroke-linecap: round;
stroke: #333333;
}
#-webkit-keyframes loadingrotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#keyframes loadingrotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
#-webkit-keyframes loadingdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -50
}
100% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -185
}
}
#keyframes loadingdash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -50
}
100% {
stroke-dasharray: 150, 200;
stroke-dashoffset: -185
}
}
<div class="loading-directive" id="product-image-container" style="display: block;">
<div class="loader">
<svg class="circular">
<circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4">
</circle>
</svg>
</div>
</div>