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>
Related
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>
I have an image that was supposed to come from the back to the front using CSS animation, but the image gets cropped before it reaches the borders of the browser, here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation</title>
<style>
.container {
width: 100%;
height: 100%;
}
.fade-in-image {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 0;
object-fit: cover;
animation: scaleAndfade 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes scaleAndfade {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<img class="fade-in-image" src="https://purepng.com/public/uploads/large/pink-heart-u4q.png" alt="" />
</div>
</body>
</html>
Edit: What I want to achieve is at the beginning of the animation, the heart should show up as a whole, and as it reaches the browser boarders, the parts that went past the border gets cropped.
Use object-fit: contain
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animation</title>
<style>
.container {
width: 100%;
height: 100%;
}
.fade-in-image {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 0;
object-fit: contain;
animation: scaleAndfade 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#keyframes scaleAndfade {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
object-fit: cover;
opacity: 1;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<img class="fade-in-image" src="https://purepng.com/public/uploads/large/pink-heart-u4q.png" alt="" />
</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.
The animation lowers the height of the h1 and then once the animation is completed, it snaps back into position.
.main-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
Avoid not checking the whole code before posting it here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
border: white solid 1px;
}
.header-container {
display: flex;
justify-content: space-between;
position: relative;
}
.main-nav {
display: flex;
}
.main-nav li {
list-style-type: none;
}
h1.main-header {
position: absolute;
top: 40%;
left: 50%;
transition: left, top;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
transform: translateX(150px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Hello World!</title>
</head>
<body>
<header class="wrap">
<nav class="header-container">
<h2 class="header-text">
Text
</h2>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<h1 class="main-header">
This is a header
</h1>
</header>
</body>
</html>
This should work as expected. Note the different use of transform: translate; and transition: left, top;, since transform: translate; is used to move the object for defined value(here 50% both X and Y) and you haven't set the returning position to match starting point, thus I've made it simple and used transition: left, top; and changed only value of X to move right then return left.
this happening because of translate(-50% ,-50%) wich is replaced by aniamtion transform.
if you want to center your header you can use flex display on the header parent like this:
.main-header {
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-repeat:infinite;
animation-iteration-count: infinite;
}
.wrap {
background-color: gray;
height: 90vh;
display:flex;
align-items:center;
justify-content:space-around
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
.main-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>
because you have specific height:90vh on your .wrap parent you can use align-items:center for vertical align the header and justify-content work for horizontal align.
You just need to use animation-fill-mode:forwards; check MDN for the property details.
.main-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode:forwards;
}
.wrap {
background-color: gray;
height: 90vh;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
80% {
transform: translateX(10px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<header class="wrap">
<h1 class="main-header">
This is a header
</h1>
</header>