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>
Related
Hello I am trying to have 2 pngs + animations that I would like to have one transitioning into the another. I currently have 2 working animations that are next to each other.
but I would prefer to have them stacked on each other and have one animation transisition to the next. Any ideas on how do this in css I have tried to find css conditional statements but I have not found anything
.animationDiv {
width: 750px;
height: 750px;
display: flex;
margin-left: 80em;
margin-top: 50em;
}
.hash {
z-index: 2;
width: 600px;
height: 600px;
opacity: 0%;
}
.page {
display: flex;
z-index: 3;
width: 600px;
height: 600px;
}
.page:hover {
animation: test 1.75s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 reverse backwards;
}
.hash:hover {
animation: test2 2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 forwards;
}
#keyframes test2 {
0% {
opacity: 0%;
transform: rotate(-540deg) scale(2);
}
25% {
opacity: 25%;
}
50% {
opacity: 50%;
}
100% {
opacity: 100%;
transform: rotate(0) scale(1);
}
}
#keyframes test {
0% {
opacity: 0%;
transform: rotate(-540deg) scale(0);
}
100% {
opacity: 100%;
transform: rotate(0) scale(1);
}
}
<!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="styles.css">
<title>Animations</title>
</head>
<body>
<div class="animationDiv">
<img class="page" src="icon.png" />
<img class="hash" src="hash.png" />
</div>
</body>
</html>
I have been trying to make an animation and have almost completed it.
The only problem I'm facing is that the horizontal and vertical scrollbars aren't hiding.
I tried adding overflow:hidden property to parent div i.e. .box but still I'm not able to hide them.
<!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" />
<title>Document</title>
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.rotor1 {
height: 100vw;
background: rgb(152, 227, 250);
animation: 9.2s keepRotating infinite ease-in-out;
z-index: 3;
}
.rotor2 {
height: 102vw;
background: rgb(204, 238, 248);
border-radius: 30%;
animation: 9.05s keepRotating infinite ease-in-out;
animation-timing-function: linear;
}
.rotor1,
.rotor2 {
width: 110vw;
position: absolute;
top: -78vw;
border-radius: 30%;
animation-timing-function: linear;
}
#keyframes keepRotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="rotor1"></div>
<div class="rotor2"></div>
</div>
</body>
</html>
Is there a way to hide both the horizontal and the vertical scrollbars??
Use overflow: hidden; on body
<!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" />
<title>Document</title>
<style>
body{
overflow: hidden;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.rotor1 {
height: 100vw;
background: rgb(152, 227, 250);
animation: 9.2s keepRotating infinite ease-in-out;
z-index: 3;
}
.rotor2 {
height: 102vw;
background: rgb(204, 238, 248);
border-radius: 30%;
animation: 9.05s keepRotating infinite ease-in-out;
animation-timing-function: linear;
}
.rotor1,
.rotor2 {
width: 110vw;
position: absolute;
top: -78vw;
border-radius: 30%;
animation-timing-function: linear;
}
#keyframes keepRotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="rotor1"></div>
<div class="rotor2"></div>
</div>
</body>
</html>
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.
I am trying to make a simple animation where a paragraph tag loops around a div. Currently, I can't get the animation to play at all. After some looking, I saw a few other questions on SO where the solution was to add vendor prefixes. I'm on Chrome, so I added that prefix. That didn't work. I saw another where I needed to add the vendor prefix to the animation property, so I tried that. That didn't work, either.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<main>
<div class="box">
<p class="animated">Hello</p>
</div>
</main>
</body>
</html>
And my css in css/main.css:
.box {
width: 500px;
height: 500px;
background-color: #ddd;
}
#keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
#-webkit-keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
p {
display: inline-block;
background-color: red;
color: white;
padding: 10px;
margin: 0;
}
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s linear infinite;
}
I have a codepen of it here: http://codepen.io/khall47/pen/pNogKz
When you change the left/top property values on an element, it needs to have a position or else nothing happens, so ..
..give the .animated rule position: relative; and it will work fine.
Updated codepen: http://codepen.io/anon/pen/gLOrwy
Side note, always put prefixed properties before non-prefixed in your CSS rules
Just add to your paragraph. It's because it's not declared in relative that it doesn't move. (neither on firefox)
position: relative;
In addition to other answers, if you want to have the same animation-timing-function for all the browser, you should give the same for all in .animated CSS block.
They both should be either:
.animated {
animation: around 4s linear infinite;
-webkit-animation: around 4s linear infinite;
}
or
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s ease-out infinite;
}
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
}
}