I'm trying to animate the paragraph which is inside the section from the bottom page to the top, but it does not work.
How can I resolve this problem?
body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
color: rgb(235, 197, 31);
animation: 1s slid;
}
#keyframes slid {
0% {
bottom: -100;
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
</html>
Please add "position: absolute;" to "span p" style.
And bottom value have to contain "px".
body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
position: absolute;
color: rgb(235, 197, 31);
animation: 1s slid;
}
#keyframes slid {
0% {
bottom: -100px;
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
Try with transform:
body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
color: rgb(235, 197, 31);
animation: 1s slid;
}
#keyframes slid {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<section>
<p>I'm YASER</p>
</section>
</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>
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 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'm trying to create a searchlight/ spotlight effect that will highlight some text using CSS animations. Heres a fiddle.
However, my spotlight does not reach up to the top of the page and instead reveals the black background to different degrees throughout the animation.
What I'm trying to achieve looks something like this:
I was wondering if anybody had any ideas as to how to modify my spotlight to vertically fill the entire page?
h1 {
color: green;
position: absolute;
}
body {
background-color: black;
overflow: hidden;
}
.spotlight {
position: relative;
width: 10vw;
height: 0vh;
border-top: 100vh solid rgba(255, 255, 255, 0.25);
border-left: 12vw solid transparent;
border-right: 12vw solid transparent;
background-color: transparent;
-webkit-transform-origin: 50% 100% 0;
z-index: 0;
-webkit-animation: move 7s ease-in-out;
}
#-webkit-keyframes move {
0% {
-webkit-transform: rotate(-30deg) scaleX(0.4);
}
50% {
-webkit-transform: rotate(30deg) scaleX(0.4);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<html>
<head></head>
<body>
<h1>
Some text
</h1>
<div class="spotlight spot1"></div>
</body>
</html>
Simply use display:absolute instead of relative and modify the code a bit ;)
h1 {
color: green;
position: absolute;
z-index: 1;
}
body {
background-color: black;
overflow: hidden;
}
.spotlight {
position: absolute;
width: 10vw;
bottom: -20px;
border-top: 140vh solid rgba(245, 245, 245, 0.493);
border-left: 12vw solid transparent;
border-right: 12vw solid transparent;
background-color: transparent;
transform-origin: 50% 100% 0;
z-index: 0;
opacity: 1;
will-change: auto;
animation: move 7s ease-in-out;
}
#keyframes move {
0% {
transform: rotate(-30deg) scaleX(0.4);
}
50% {
transform: rotate(30deg) scaleX(0.4);
}
100% {
transform: rotate(0deg);
}
}
<!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>
<h1>
Some text
</h1>
<div class="spotlight spot1"></div>
</body>
</html>