I am trying to make a wave effect in css, for that was trying to put a big rotating div with rounded corner at bottom of the page.
But for each refresh of the page, it is moving up or down with no reason, no matter what I was doing.
I don't know it is bad idea to put a div larger size than page itself. But I am not getting any reason why it is jumping around.
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
div {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example{
from{ transform: rotate(0deg);}
to{ transform: rotate(360deg);}
}
here is complete HTML
<!DOCTYPE html>
<html>
<head>
<style>
html {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
div {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
please help
Thanks in advance!
Your body properties aren't defined, simply add it like so :
html,body {
width: 100%;
height: 100%;
clip: auto;
position: absolute;
overflow: hidden;
}
To avoid problems like these, I would recommend always using a div container and not relying on html and body (which behavior is not always constant between browsers).
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
width: 100%;
height: 100%;
clip: auto;
position: relative;
overflow: hidden;
}
div#wavecontainer {
width:100%;
height:100%;
overflow: hidden;
top: 0%;
left: 0%;
position:relative;
}
div#wave {
width: 500vh;
height: 500vh;
position: absolute;
top: 50%;
left: 50%;
background-color: red;
animation-duration: 10s;
animation-name: example;
animation-iteration-count: infinite;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
}
#keyframes example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wavecontainer">
<div id="wave"></div>
</div>
</body>
</html>
Related
I'm making a HTML program where I want to have two circles traveling on a circular path, in opposite directions. That's the main idea. Here's my code so far (I followed this tutorial on circular movement coding, and stopped right at 8:35 when it's just the red circle in motion):
styles.css:
body{
margin: 0;
padding: 0;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line{
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Two Circles in Circular Motion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "circle">
<div class = "line"></div>
</div>
</body>
</html>
Right now I only have 1 circle. I want to create another one, and animate it so that it travels in the same circular path but in the opposite direction. I'm relatively new to CSS and HTML, so can someone please help? Thanks!
You can optimize your code and use only one div and its pseudo element for the small circles:
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #262626;
/* place both item to the center */
display:grid;
align-content:center;
justify-content:center;
}
.circle::before,
.circle::after {
content: '';
grid-area:1/1; /* both will overlap */
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
transform:rotate(0deg) translate(200px) rotate(0deg);
animation:animate 2s linear infinite;
}
.circle::after {
animation-direction:reverse; /* the opposite animation for the after */
background:blue;
}
#keyframes animate {
100% {transform:rotate(360deg) translate(200px) rotate(-360deg);}
}
<div class="circle">
</div>
Another solution is you could have made another line and used
animation-direction: reverse; on it.
Example;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line, .line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
.line2 {
animation-direction: reverse;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
You also could have created another line (like I did in my example (line2)), and bound a different animation keyframe to it like below;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate2 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
There are many possibilities to achieve what you are looking for :)
Because you say you are new to HTML and CSS I figured I'd show you some alternatives.
Basically, I want my div to show from left to right by altering it's width. But when transform: translate(-50%,-50%); is present, the div's width animates from it's center to the assigned position.
I can't really change the position to anything but absolute since the div is placed in a specific spot.
.Container{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 150px;
animation: Animate 3s forwards;
}
.Container:after{
content: '';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 150px;
background-color: rgb(110, 110, 110);
transform: skew(-35deg);
transform-origin: 100% 0;
z-index: 99;
}
#keyframes Animate{
from{
width: 0px;
}
to{
width: 250px;
background-color: red;
}
}
<div class="Container">
<div class="projDescription">
<h2>Hi</h2>
<p>Hello</p>
<br>
Help?
</div>
</div>
Would it be better if I used Jquery instead?
Also, I'll ask this here too since it has to do with the same div; can I animate the :after pseudo element? It's mostly just there to give the div an angled style, and I know I could've just used something else to style it. But I was just curious if it is possible.
Just remove the transform property from your .Container class and use calc() if you know the exact value of the width and height
.Container{
z-index: 100;
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 125px);
height: 150px;
animation: Animate 3s forwards;
}
.Container:after{
content:'';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 150px;
background-color: rgb(110, 110, 110);
transform: skew(-35deg);
transform-origin: 100% 0;
z-index: 99;
}
#keyframes Animate{
from{
width: 0px;
}
to{
width: 250px;
background-color: red;
}
}
I'd move some attributes to inner classes and made small modifications to achieve it; and also I used scale for width expansion animation instead of animation width property, to avoid an unnecessary reflow
.Container{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 250px;
height: 150px;
}
.projDescription{
height: 100%;
transform: scaleX(0);
position: absolute;
top: 0;
width:100% ;
animation: Animate 3s forwards;
}
.Container:after{
content: '';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 100%;
box-sizing: border-box;
background-color: rgb(110, 110, 110);
transform: skew(-35deg) translateX(-50%);
transform-origin: 100% 0;
z-index: 99;
animation: move 3s forwards;
}
#keyframes Animate{
to{
transform: scaleX(1);
background-color: red;
}
}
#keyframes move{
to{
transform: skew(-35deg) translateX(0%);
}
}
<div class="Container">
<div class="projDescription">
<h2>Hi</h2>
<p>Hello</p>
Help?
</div>
</div>
I am working a project on my favorite science stories animated using HTML. While I was working on it By just changing the position to fixed or nothing position of all my objects was changing. If you remove the position property from #Guy, you will notice that the image of Galileo will shift drastically. I just want to know why this happens.
:root {
--initX: 280px;
--initY: 70px;
--finalY: 600px;
}
body {
background-color: aqua;
padding: 0px;
margin: 0px;
}
#Guy {
z-index: 4;
height: 200px;
position: fixed;
width: auto;
transform: translate(800px, 450px);
}
#Galilo {
height: 50px;
width: auto;
z-index: -1;
transform: translate(290px, 5px) rotateZ(4deg);
}
#tower {
height: 650px;
width: 150px;
z-index: 0;
transform: translate(250px, 50px) rotateZ(4deg);
position: absolute;
background-color: grey;
}
#Lball {
height: 40px;
width: 40px;
z-index: 2;
border-radius: 50%;
transform: translate(var( --initX), var(--initY));
background-color: blue;
position: absolute;
animation: lite 2s linear 1s infinite forwards;
}
#Hball {
height: 50px;
width: 50px;
z-index: 3;
transform: translate(calc(var( --initX) + 75px), var(--initY));
border-radius: 50%;
background-color: red;
position: absolute;
animation: heavy 2s linear 1s infinite forwards;
}
#floor {
height: 25%;
width: 100%;
background-color: green;
position: absolute;
z-index: -1;
transform: translate(0px, 565px);
}
#hide {
height: 12%;
width: 100%;
background-color: green;
position: absolute;
z-index: 1;
transform: translate(0px, 650px);
}
#keyframes lite {
0% {
transform: translate(var( --initX), var(--initY))
}
90% {
transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
}
100% {
transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
}
}
#keyframes heavy {
0% {
transform: translate(calc(var( --initX) + 75px), var(--initY))
}
90% {
transform: translate(calc(var( --initX) + 75px), var(--finalY))
}
100% {
transform: translate(calc(var( --initX) + 75px), var(--finalY))
}
}
<div id="tower"></div>
<div id="Hball"></div>
<div id="Lball"></div>
<div id="floor"></div>
<div id="hide"></div>
<img src="stick fidure.png" alt="Dude thinking" id="Guy">
<img src="galileo-galilei.png" alt="gallilo" id="Galilo">
P.S.
The link for the image of Galileo is https://cdn.images.express.co.uk/img/dynamic/109/590x/galileo-galilei-819977.jpg and the stick figure was made in Paint 3D
position: fixed takes the element out of the document flow and places it in relation to the viewport/window. Usually that also causes this element to overlap other elements. The other elements however will be rearranged in a way like the fixed element wouldn't be there (it's not in the document flow). So adding/removing position: fixed to/from an element will have all these effects on the overall document.
I'm trying to make an animation for a webpage I'm tinkering with at the moment. I want the animation of a ball to start from the bottom of the screen, go to the middle, then expand to the whole page. I'm having a problem when it comes to the expanding part. When it expands since I'm using transform: scale it expands beyond the width and height of the viewport causing me to scroll. How is it possible to make it fit into the viewport and not having to scroll. I tried putting it in a container and putting overflow:hidden but it doesn't seem to work. Here is my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ballcopy.css">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<div class="ball"></div>
</main>
</body>
</html>
*, *::after, *::before {box-sizing: inherit;}
html{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
.ball{
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0%;
position: absolute;
bottom: 0%;
left: 50%;
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes rise{
0%{
border-radius: 50%;
}
50%{
border-radius: 50%;
transform:translateY(-400px);
}
75%{
border-radius: 40%;
}
80%{
border-radius: 30%;
}
90%{
border-radius:20%;
}
100%{
transform: scale(20,20);
}
}
```
body{
height: 100vh;
width: 100vw;
overflow: hidden;
}
this fixes it so that your animation doesn't overflow and make you scroll.
For overflow: hidden to work on main you need to set position: relative and a height:
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
main {
position: relative;
height: 100vh;
overflow: hidden;
}
.ball {
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0%;
position: absolute;
bottom: 0%;
left: 50%;
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes rise {
0% {
border-radius: 50%;
}
50% {
border-radius: 50%;
transform: translateY(-100%);
}
75% {
border-radius: 40%;
}
80% {
border-radius: 30%;
}
90% {
border-radius: 20%;
}
100% {
transform: scale(20, 20);
}
}
<main>
<div class="ball"></div>
</main>
Or you could set overflow: hidden on the body:
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.ball {
background-color: #eb8c28;
width: 100px;
height: 100px;
border-radius: 0%;
position: absolute;
bottom: 0%;
left: 50%;
animation: rise;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes rise {
0% {
border-radius: 50%;
}
50% {
border-radius: 50%;
transform: translateY(-100%);
}
75% {
border-radius: 40%;
}
80% {
border-radius: 30%;
}
90% {
border-radius: 20%;
}
100% {
transform: scale(20, 20);
}
}
<main>
<div class="ball"></div>
</main>
Also, it's a good idea to set transform: translateY to a relative value so it's scalable to different screen-sizes as well, i.e. transform: translateY(-100%)
This is my code:
html
<div id="back">
<div id="right_text">TEST</div>
<div id="left_text">TEST2</div>
</div>
<div id="mid"></div>
css
#mid {
border: 1px solid black;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin:auto;
margin-top:-125px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#back {
width:auto;
height: 150px;
border: 1px solid red;
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
position: static;
}
#-webkit-keyframes rotateY {
from {
-webkit-transform: rotateY(0deg)
}
to {
-webkit-transform: rotateY(360deg)
}
}
#right_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: right;
margin-top: 35px;
text-align: center;
}
#left_text {
border: 1px solid green;
height: 75px;
width: 75px;
float: left;
margin-top: 35px;
text-align: center;
}
http://jsfiddle.net/bXhL8/
As you can see, both text-divs face their back to the screen when they are not on their side of origin. i want both of them to always stay the same and just "hang on" to the rotation of my back-div.
my question would be if that is possible in css alone or if id need js for it.
Add the following to your css
#left_text, #right_text {
-webkit-animation: rotateY linear 5s;
-webkit-animation-iteration-count: infinite;
}
JSFiddle
Update
Updated JSFiddle
here is my new bit of code. its not a perfect circle yet, because i just added 4 frames to my #keyframes. im thinking about making a actual circular rotation and adding a skew() element to the whole circular function / to my whole body, don't know if that will work though.
thanks for your help!
html:
<div id="right_text">
<div id="right_text_text">TEST</div>
</div>
<div id="left_text">
<div id="left_text_text">TEST2</div>
</div>
<div id="mid"></div>
css:
#mid {
border: 1px solid black;
background-color: red;
height: 100px;
width: 100px;
-webkit-animation: rotate linear 5s;
-webkit-animation-iteration-count: infinite;
margin-top: 105px;
margin-left: 210px;
position: static;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
#right_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: downupright linear 8s infinite;
}
#left_text_text {
border: 1px solid black;
text-align: center;
position: absolute;
width: 50px;
-webkit-animation: updownleft linear 8s infinite;
}
#-webkit-keyframes downupright {
0% { left: 490px; top: 150px;}
25% { left: 245px; top: 100px; z-index: -10;}
50% { left: 0px; top: 150px;}
75% { left: 245px; top: 200px; z-index:10;}
100% { left: 490px; top: 150px;}
}
#-webkit-keyframes updownleft {
0% { left: 0px; top: 150px;}
25% { left: 245px; top: 200px; z-index: 9;}
50% { left: 490px; top: 150px;}
75% { left: 245px; top: 100px; z-index: -9;}
100% { left: 0px; top: 150px;}
}
http://jsfiddle.net/bXhL8/4/