I'd like to animate the top of a div which is filled with a blue sea like color.
And I'd like the animation to feint little sea waves. Knowing that my displaying is for a very little resolution (120px width).
I tried with particles-js, and it was cool to learn how to add a motion effect, but it doesn't make my top section looking like sea waves.
And then I tried with CSS, trying to understand some existing code and the best I've done for the moment is that:
:root {
--bg-color: #dfffa9;
--wave-color: #0048ff;
--animation-time: 4s;
--max-height: 15px;
--circle-offset: -1.5%;
--wave-width: 55%;
--height-wave-up: 109%;
--height-wave-down: 100%;
--top-wave-up: 60%;
--top-wave-down: 40%;
--border-radius-right-up: 100% 50%;
--border-radius-left-up: 50% 100%;
}
body {
margin: 0;
overflow: hidden;
background: var(--wave-color);
}
.container {
position: relative;
height: 10vh;
background: var(--bg-color);
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: var(--max-height);
background: var(--bg-color);
animation: beWavy var(--animation-time) infinite linear;
}
.wave::before,
.wave::after {
content: "";
display: block;
position: absolute;
border-radius: var(--border-radius-right-up);
width: var(--wave-width);
}
.wave::before {
height: var(--height-wave-up);
background-color: var(--wave-color);
right: var(--circle-offset);
top: var(--top-wave-up);
animation: beWavyBefore var(--animation-time) infinite step-end;
}
.wave::after {
height: var(--height-wave-down);
background-color: var(--bg-color);
left: var(--circle-offset);
top: var(--top-wave-down);
animation: beWavyAfter var(--animation-time) infinite step-end;
}
#keyframes beWavy {
0% {
animation-timing-function: ease-in;
height: var(--max-height);
}
25% {
animation-timing-function: ease-out;
height: 0;
}
50% {
animation-timing-function: ease-in;
height: var(--max-height);
}
75% {
animation-timing-function: ease-out;
height: 0;
}
100% {
animation-timing-function: ease-in;
height: var(--max-height);
}
}
#keyframes beWavyBefore {
25% {
background-color: var(--bg-color);
height: var(--height-wave-down);
top: var(--top-wave-down);
border-radius: var(--border-radius-left-up);
}
75% {
background-color: var(--wave-color);
height: var(--height-wave-up);
top: var(--top-wave-up);
border-radius: var(--border-radius-right-up);
}
}
#keyframes beWavyAfter {
25% {
background-color: var(--wave-color);
height: var(--height-wave-up);
top: var(--top-wave-up);
border-radius: var(--border-radius-left-up);
}
75% {
background-color: var(--bg-color);
height: var(--height-wave-down);
top: var(--top-wave-down);
border-radius: var(--border-radius-right-up);
}
}
<?php
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sea level</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<section class="container">
<div class="wave"></div>
</section>
But 2 waves only seems really repetitve and low cost haha. I want random waves with random starting points.
So if someone could help me understand how it works exactly, thanks.
Related
I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.
.line {
width: 5rem;
height: 1px;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
transform: rotate(90deg);
animation: stand linear 1s;
}
#keyframes stand {
0% {width: 0;}
100% {width: 5rem;}
}
<div class="line"></div>
That's because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.
.line {
width: 1px;
height: 5rem;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
animation: stand linear 1s;
}
#keyframes stand {
0% {height: 0;}
100% {height: 5rem;}
}
<div class="line"></div>
The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.
Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.enter code here
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to animate a straight
line in linear motion?
</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.Stack {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Stack::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style>
</head>
<body>
<div class="Stack"></div>
</body>
</html>
body {
background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
animation: backdrop_roll linear 100s infinite;
}
/* .sky {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
opacity: 1;
background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
animation: backdrop_roll linear 100s infinite;
} */
.enemy-animation {
position: relative;
z-index: 1;
animation-direction: alternate;
animation-duration: 3s;
animation-name: oscillate;
animation-iteration-count: infinite;
}
#ship {
position: absolute;
width: 100px;
height: 100px;
top: 90%;
left: 50%;
margin-left: -50px;
background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png');
z-index: 1;
}
#keyframes oscillate {
from {
left: 0%;
}
to {
left: calc(100% - 200px);
}
}
#keyframes backdrop_roll {}
<!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">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
<title>Shooting Game</title>
</head>
<body>
<div class="sky"></div>
<img class="enemy-animation" src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship">
<div id="ship"></div>
</body>
</html>
I want to move the backround sky image such it feels like the ship is moving, using key frame animation.
I was able to move it by using keyframe animation on div by changing the css top property but it doesnt work on body.
#keyframes backdrop_roll { from { top: -630px; } to { top: 0; } }
the above line works if it was a div, any way to move the background will work.
You'll want to target the background-position instead of a translate because translate will apply to body as a container of your children. See example below, adjust the animation duration speed according to how fast visually you want the ship to appear to be going. Cheers.
body {
background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
animation: backdrop_roll linear 15s infinite;
background-position: bottom center;
}
/* .sky {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
opacity: 1;
background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
animation: backdrop_roll linear 100s infinite;
} */
.enemy-animation {
position: relative;
z-index: 1;
animation-direction: alternate;
animation-duration: 3s;
animation-name: oscillate;
animation-iteration-count: infinite;
}
#ship {
position: absolute;
width: 100px;
height: 100px;
top: 90%;
left: 50%;
margin-left: -50px;
background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png') ;
z-index: 1;
}
#keyframes oscillate {
from {
left: 0%;
}
to {
left: calc(100% - 200px);
}
}
#keyframes backdrop_roll {
to {
background-position: center top;
}
}
<!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">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
<title>Shooting Game</title>
</head>
<body>
<div class="sky"></div>
<img class="enemy-animation" src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship">
<div id="ship"></div>
</body>
</html>
Hello everyone.
I have started making a small app in Electron, and want to make a loading screen.
But every time I add the animation to the container div, it gives its background color weird color banding.
Here's an image of it.
Basically the top is a color I do not even use anywhere, while the bottom is the actual color I want.
Here's an image with the animation disabled.
What I tried:
Ran the website in Edge, did produce the color banding.
Ran the website in the snippet, did not produce the color banding.
Tried setting the background color in the animation itself, did not fix the problem.
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#400;600&family=Roboto&display=swap');
:root {
--main1: #282b30;
--main2: #1e2124;
--main3: #16181a;
--titleFont: 'Nunito', sans-serif;
--textFont: 'Roboto', sans-serif;
--textColor: #ffffff;
}
* {
font-family: var(--textFont);
color: white;
}
html {
height: 100%;
}
body {
overflow: hidden;
}
.transitionContainer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--main2);
color: var(--textColor);
font-size: 500%;
animation-name: hideTransition;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-delay: 1.25s;
animation-fill-mode: both;
opacity: 1;
}
#keyframes hideTransition {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
}
#keyframes showTransition {
from {
transform: scale(1.5);
opacity: 0;
z-index: -1;
}
to {
transform: scale(1);
opacity: 1;
z-index: 0;
}
}
.logoText {
position: absolute;
top: 50%;
left: 50%;
margin-left: -49.258px;
margin-top: -96px;
}
.loadingBarBack {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25px;
background-color: var(--main3);
}
.loadingBarFront {
width: 0%;
height: 100%;
background-color: limegreen;
animation: loading 1s;
animation-fill-mode: forwards;
}
#keyframes loading {
from {
width: 0%;
}
to {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="./index.js" defer></script>
</head>
<body>
<div class="transitionContainer">
<h1 class="logoText">R</h1>
<div class="loadingBarBack">
<div class="loadingBarFront"></div>
</div>
</div>
</body>
</html>
Thanks for any help in advance!
Figured it out!
Apparently animation-fill-mode: both; caused some of the div to go transparent before the animation even played.
Setting it to animation-fill-mode: forwards; fixed it.
I was wondering if it is possible to hide parts of an image that is positioned with negative px?
Essentially I would like to hide the image part on the very right of the screen that goes past the pink div and purple div. I would also like to hide the image part that goes downwards into the purple part. So only the image on the pink div is visible.
snippet of animation
I have used the animation property to set the positions on page load.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
position: relative;
top: -100px;
left: -100px;
}
100% {
position: relative;
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
position: absolute;
bottom: -100px;
right: -150px;
}
100% {
position: absolute;
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2" /></div>
</div>
<div id="div2">
</div>
</body>
</html>
You need to add position: relative to the parent container (div1 in this case) and overflow:hidden to hide the part of the images which goes outside the div. Also remove the position property from the keyframes because it's not used.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
top: -100px;
left: -100px;
}
100% {
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
bottom: -100px;
right: -150px;
}
100% {
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2"><!-- typo here -->
</div>
</div>
<div id="div2">
</div>
</body>
</html>
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
}
}