Im currently trying to do an animation whose end position should look like this
It worked fine until I switched to a <1080p resolution, and now its all messed up and looks like this:
I used responsive "vw / %" So i dont understand why is that happening.
Theres a pen of the code: https://codepen.io/romancc/pen/VwwxWgb
And the code itself
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>
CSS:
body {
background-image: url("https://i.imgur.com/I6ixFFG.jpg");
}
/* background sky */
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Frontal waves */
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
/* back waves */
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
/* boat */
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 26vw;
height: 20vw;
background-repeat: no-repeat;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
/* question mark */
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 5vw;
height: 5vw;
position: relative;
background-repeat: no-repeat;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
/* Frontal waves */
@keyframes olas-front {
0% {
left: -1vw;
bottom: -9vw;
}
50% {
left: 0vw;
bottom: -8.7vw;
}
100% {
left: -1vw;
bottom: -9vw;
}
}
/* back waves */
@keyframes olas-back {
0% {
left: -2vw;
bottom: -9vw;
}
50% {
left: -3vw;
bottom: -8.7vw;
}
100% {
left: -2vw;
bottom: -9vw;
}
}
/* boat */
@keyframes barco {
0% {
left: -7vw;
}
100% {
left: 0vw;
}
}
/* boat */
@keyframes barco-balanceo {
0% {
bottom: -7.6vw;
}
50% {
bottom: -7.9vw;
}
100% {
bottom: -7.6vw;
}
}
/* question mark */
@keyframes interrogacion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}