I'm making my coming soon webpage but the problem is animation is not working. How can I fix it?
HTML code-
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="file:///Users/privacy/Desktop/coomming%20soon/comingsoon.css">
</head>
<body>
<div id="topline">
<h4> Our new site is </h4>
<a class="c">COOMING SOON</a>
</div>
<p class="h">hi</p>
</body>
</html>
the css code-
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
html {text-align: center;}
#topline {margin-top: 8%;
color: white;
font-size: 35;
}
.c{animation-duration: 4s;
animation-delay: 1s;
animation-name: cos;
animation-iteration-count: 2;
color: #66ccff;
font-size: 80px;
}
#keyframes cos {
0% {color: #66ccff; left: 0px;}
25%{color: #ff33cc; left: -800px;}
75%{color: #3333ff; left: 800px;}
100%{color:#66ccff; left: 0px;}
}
#keyframes h {
from{top: 0px;}
to{top: 80px;}
}
.h {animation-name: h;
animation-iteration-count: 3;
position: relative;
color: blueviolet;
}
well, href is privacy as I have not lunched it. ignore the title.I'm a learner so maybe some typo error but I have checked the browser console. thanks.
You haven't added animation-duration in the above code.And you have used keyframes before the animation code.. Here's the answer
body {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
html {
text-align: center;
}
#topline {
margin-top: 8%;
color: white;
font-size: 35;
}
.c {position:relative;
animation-duration: 4s;
animation-delay: 1s;
animation-name: cos;
animation-iteration-count: 2;
color: #66ccff;
font-size: 80px;
}
#keyframes cos {
0% {
color: #66ccff;
left: 0px;
}
25% {
color: #ff33cc;
left: -800px;
}
75% {
color: #3333ff;
left: 800px;
}
100% {
color: #66ccff;
left: 0px;
}
}
.h {
animation-name: h;
animation-iteration-count: 3;
animation-duration: 3s;
position: relative;
color: blueviolet;
}
#keyframes h {
from {
top: 0px;
}
to {
top: 80px;
}
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="file:///Users/privacy/Desktop/coomming%20soon/comingsoon.css">
</head>
<body>
<div id="topline">
<h4> Our new site is </h4>
<a class="c">COOMING SOON</a>
</div>
<p class="h">hi</p>
</body>
</html>
Related
i have a html page with gradient transition background,
the background colors change automatically after 5 seconds and hense creating a animation. I am using css & key frames for this.
I am converting this html page to a AMP page.
This transition works in plain html pages, but shows the first color only when started in am.
how can i get it working?
working Code-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<body style="background-color:#2c3333;"></body>
</body>
</html>
Style.css-
.user {
display: inline-block;
width: 170px;
height: 170px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
body {
font-size: 1em;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
}
.head-div {
text-align: center;
color: #000000;
/* padding:0%;
padding-top:7%;
padding-bottom:300%; */
}
img {
pointer-events: none;
display: inline-block;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
object-fit: cover;
}
.link-div {
padding: 10%;
padding-top: 1%;
padding-bottom: 1%;
color: #2c3333;
}
.alink {
text-align: center;
margin-top: 1px;
padding: 20px 0;
max-width: 590px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
color: #2c3333;
text-decoration: none;
}
.alink:hover {
color: #ffffff;
background-color: #54bab9;
border: 2px solid;
border-color: #ffffff;
}
.copyright {
text-align: center;
color: #ffffff;
}
.getlink {
font-size: 17px;
text-align: center;
color: #ffffff;
}
.footer {
position: fixed;
bottom: 25px;
left: 0;
right: 0;
text-align: center;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
SO after some Research and experimenting with AMP, finally i came with an answer to my own problem,
Posting this here so that if any one gets the same problem, Gets a solution.
So the problem was that i was having a AMP webpage and i wanted to get the background Gradient animation working like it is working in the index.html file,
i was not, but i have solution.
it was no working because we were trying to manipulate body of html using css,. which works in html, but not in css.
The solution is to create a div in body tag and some changes in amp-style.
.divanim is the div here
Here is the working AMP page-
index.amp.html-
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashutosh_7i</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.divanim {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100%;
}
#keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="divanim">
//body with gradient
</div>
</body>
</html>
amp animation on their website is very confusing , alteast for me, but i got the solution anyways.😉
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: 123;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes 123 {
50% {
bottom: 10%;
}
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
Gone over it 3 times already, can't see where im messing up
try to use string instead of number in keyframes naming
here is your animation example. https://codepen.io/baomastr/pen/KKgNGbg
.circles {
height: 80px;
width: 80px;
border-radius: 50%;
border: solid;
position: absolute;
animation-name: test;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 5s;
}
#circle1 {
background: linear-gradient(45deg, #ccffff, #ffcccc);
left: 50%;
}
#circle2 {
background: repeating-linear-gradient(
90deg,
#a52a2a 2px,
#cccccc 5px,
orange 10px
);
left: 25%;
}
#keyframes test {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
1st is keyframe with number is not accepted. 2nd In you keyframe you need to specify 0% and 100% as well. To be for example like:
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
DEMO:
body {
background: hsl(210, 100%, 95%);
}
#Title {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;
color: white;
}
h1:hover {
color: black;
transform: scale(1.2)
}
.circles {
height: 80px;
width: 80px;
border-radius:50%;
border:solid;
position:fixed;
animation-name: slidein;
animation-iteration-count: infinite;
animation-duration: 10s;
}
#circle1 {
animation-timing-function: linear;
background: linear-gradient(45deg, #ccffff, #ffcccc);
left:50%;
}
#circle2 {
animation-timing-function: linear;
background: repeating-linear-gradient(90deg, #A52A2A 2px, #cccccc 5px, orange 10px);
left:25%;
}
#keyframes slidein {
0% { bottom: 60%; }
50% { bottom: 10%; }
100% { bottom: 0%; }
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<head>
<title>Animation-1</title>
</head>
<body>
<h1 id="Title">Placeholder</h1>
<div class="circles" id="circle1"> </div>
<div class="circles" id="circle2"> </div>
</body>
</html>
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
body {
background-color: gray;
width: 1024;
height: 768;
}
#Login {
background-color: blue;
height: 50px;
width: 190px;
position: relative;
top: 550px;
left: 650px;
}
#pLogin {
font-size: 42px;
padding-left: 35px;
font-family: Arial, Helvetica, sans-serif;
}
#IDiscord {
position: relative;
top: 85px;
left: 550px;
width: 405px;
height: 360px;
}
#ITwitter {
position: relative;
bottom: 400px;
left: 700px;
height: 75px;
width: 75px;
animation-name: idITwitter;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: paused;
}
.IMTwitter {
position: relative;
bottom: 400px;
left: 700px;
height: 75px;
width: 75px;
animation-name: classIMTwitter;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
#keyframes idITwitter {
0% {
bottom: 400px;
left: 700px;
}
95% {
bottom: 106px;
}
}
#keyframes classIMTwitter {
0% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
100% {
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Media Maniac</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/Animation/Animation.css">
<script type='text/javascript' src='../Javascript/Animation/wow.js'></script>
</head>
</html>
<body>
<div id="Login">
<Log id="pLogin">Log in</p>
</div>
<div>
<img id="IDiscord" src="../img/Hindex/Discord_outline.png">
</div>
<div>
<img id="ITwitter" class="IMTwitter" src="../img/Hindex/Twitter.png">
</div>
</body>
Im trying to code the main page of a website Im creatig and Im trying to achieve a fall animation in css and then im trying to rotate an image. I realize that there probaly are better ways to do this, but this should work, shouldnt it. Any help would be greatly appreciated. There may be a simple souloution i overlooked or a typo of some sort(or my brain doesnt work)but yea, i think that css should defintly work.
Since both id and class refer to the same img you can omit the class and add on the animation property the two animations like this:
#ITwitter {
...
animation-name: idITwitter, classIMTwitter;
...
}
Working snippet:
body {
background-color: gray;
width: 1024;
height: 768;
}
#Login {
background-color: blue;
height: 50px;
width: 190px;
position: relative;
top: 550px;
left: 650px;
}
#pLogin {
font-size: 42px;
padding-left: 35px;
font-family: Arial, Helvetica, sans-serif;
}
#IDiscord {
position: relative;
top: 85px;
left: 550px;
width: 405px;
height: 360px;
}
#ITwitter {
position: relative;
bottom: 400px;
left: 700px;
height: 75px;
width: 75px;
animation-name: idITwitter, classIMTwitter;
animation-duration: 5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-fill-mode: none;
/* animation-play-state: paused;*/
}
#keyframes idITwitter {
0% {
bottom: 400px;
left: 700px;
}
95% {
bottom: 106px;
}
}
#keyframes classIMTwitter {
0% {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-ms-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
100% {
}
}
<div id="Login">
<Log id="pLogin">Log in</p>
</div>
<div>
<img id="IDiscord" src="../img/Hindex/Discord_outline.png">
</div>
<div>
<img id="ITwitter" src="https://www.matrixgroup.net/snackoclock/wp-content/uploads/2012/07/twitter-bird-light-bgs.png">
</div>
Im currently trying to do an animation whose end position should look like this, as seen in the image below, noe thay its an animation
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.
And the code itself
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;
}
}
<!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>
With this code we simply change background size accordingly other objects to maintain same aspect ratio in every screen.
body {background-image: url("https://i.imgur.com/I6ixFFG.jpg");}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.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;
background-size:4vw auto;
}
.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;
background-size:4vw auto;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size:13vw auto;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size:1vw auto;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
#keyframes olas-front {
0% {left: -1vw;bottom: -9vw;}
50% {left: 0vw;bottom: -8.7vw;}
100% {left: -1vw;bottom: -9vw;}
}
#keyframes olas-back {
0% {left: -2vw; bottom: -9vw;}
50% {left: -3vw;bottom: -8.7vw;}
100% {left: -2vw;bottom: -9vw;}
}
#keyframes barco {
0% {left: -7vw;}
100% {left: 0vw;}
}
#keyframes barco-balanceo {
0% {bottom: -7.6vw;}
50% {bottom: -7.9vw;}
100% {bottom: -7.6vw;}
}
#keyframes interrogacion {
from {opacity: 0;}
to {opacity: 1;}
}
<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>
I make image fixed size. Try resize with codepen
body {
background-image: url("https://i.imgur.com/I6ixFFG.jpg");
}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 30vw;
min-height: 250px;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 120%;
height: 75px;
z-index: 3;
bottom: -6%;
left: -3%;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 100%;
width: 120%;
height: 75px;
z-index: 1;
bottom: 0;
left: -2%;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: absolute;
z-index: 2;
height: 215px;
width: 100%;
background-repeat: no-repeat;
bottom: -10%;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 50px;
height: 50px;
position: absolute;
background-repeat: no-repeat;
top: -30px;
left: 190px;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
#keyframes olas-front {
0% { left: -3%; }
50% { left: 0; }
100% { left: -3%; }
}
#keyframes olas-back {
0% { left: -2%; }
50% { left: -5%; }
100% { left: -2%; }
}
#keyframes barco {
0% { left: -7vw; }
100% { left: 0vw; }
}
#keyframes barco-balanceo {
0% { bottom: -10%;}
50% { bottom: -12%; }
100% { bottom: -10%; }
}
#keyframes interrogacion {
from { opacity: 0; }
to { opacity: 1; }
}
<!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">
<div class="olasFront"></div>
<div class="bote">
<div id="interrogacion">
</div>
</div>
<div class="olasBack"></div>
</div>
</body>
<!-- Frontal waves -->
</html>
I think you need to use media query as per your width changes
/* If screen size is 1050px wide, or less*/
#media screen and (max-width: 1050px) {
#interrogacion{
margin-left: 20vw;
bottom : 1.8vw;
//change your css as per requirenment
}
}