Why does this element animate backwards? - css

Question

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>

Answer 1

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);
}
}

Answer 2

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>