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>
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>
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>
How can I make the scroll bar stop? You can see the scroll bar which is on the left. I think there is not any problem with the HTML code but I'm sure there is a problem with the CSS code.
I first thought that it was a problem with the margin or length, but it wasn't.
Here is my CSS & HTML code, How can I fix it? or Where is the problem? -
html {
height: 100%;
}
body {
background-color: black;
}
.trans_box {
width: 180px;
height: 180px;
background-color: green;
vertical-align: middle;
display: inline-block;
position: relative;
top: 200px;
animation: block-rotate 6s linear infinite;
}
#keyframes block-rotate {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
.part {
position: absolute;
width:180px;
height:180px;
-webkit-border-radius:200px 0 0 0;
-moz-border-radius:200px 0 0 0;
}
#one {
background-color:blue;
top: -70%;
transform: rotate(45deg);
}
#two {
background-color: pink;
transform: rotate(135deg);
left: 70%;
}
#three {
background-color: red;
transform: rotate(-45deg);
left: -70%;
}
#four {
background-color: antiquewhite;
transform: rotate(-135deg);
top: 70%;
}
<!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>
<link rel="stylesheet" href="mainpage.css">
</head>
<body>
<div style="text-align: center;">
<div class="trans_box">
<div class="part" id="one"></div>
<div class="part" id="two"></div>
<div class="part" id="three"></div>
<div class="part" id="four"></div>
</div>
</div>
</body>
</html>
add body {overflow: hidden;} into your CSS, fixed code is here:
html {
height: 100%;
}
body {
background-color: black;
overflow: hidden;
}
.trans_box {
width: 180px;
height: 180px;
background-color: green;
vertical-align: middle;
display: inline-block;
position: relative;
top: 200px;
animation: block-rotate 6s linear infinite;
}
#keyframes block-rotate {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}
.part {
position: absolute;
width:180px;
height:180px;
-webkit-border-radius:200px 0 0 0;
-moz-border-radius:200px 0 0 0;
}
#one {
background-color:blue;
top: -70%;
transform: rotate(45deg);
}
#two {
background-color: pink;
transform: rotate(135deg);
left: 70%;
}
#three {
background-color: red;
transform: rotate(-45deg);
left: -70%;
}
#four {
background-color: antiquewhite;
transform: rotate(-135deg);
top: 70%;
}
<!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>
<link rel="stylesheet" href="mainpage.css">
</head>
<body>
<div style="text-align: center;">
<div class="trans_box">
<div class="part" id="one"></div>
<div class="part" id="two"></div>
<div class="part" id="three"></div>
<div class="part" id="four"></div>
</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.
Here is the CSS code
#keyframes anim{
0% {background-color: red; top: 0px; }
100% {background-color: yellow; top: calc(100vh - 110px);}
}
.circle {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: red;
animation-name: anim;
animation-duration: 3s;
animation-fill-mode: forwards;
position: relative;
display: none;
}
#button {
height: 100px;
width: 100px;
border-radius: 50px;
background-color: red;
position: relative;
}
#button:target {
animation-name: anim;
animation-duration: 3s;
animation-fill-mode: forwards;
}
And HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
CSS anim
</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class='circle'>
</div>
<a href="#button">
<div id="button">
</div>
</a>
</body>
</html>
So when I click on the #button div, (ignore the .circle) it goes down and stays there as it is intended in the animation. But it doesn't change the color. Why and how to fix it ?