I am trying to slide div in after 1 second and slide it out after 4 seconds exactly the same way. is it possible?
The second problem is, that the black div(second div), disappears after the animation.
.first {
width: 100px;
height: 100px;
background: red;
animation-name: example;
animation-duration: 2s;
}
.second {
width: 0;
height: 100px;
background: black;
margin-top: -100px;
margin-left: 100px;
animation-name: example2;
animation-delay: 2s;
animation-duration: 2s;
}
#keyframes example {
from {
margin-left: -200px
}
to {
margin-left: 0px
}
}
#keyframes example2 {
from {
width: 0px
}
to {
width: 250px
}
}
<div class="first"></div>
<div class="second"></div>
JSFiddle
if you use percentages you can do what you want.
You can define your animation just as you like.
#keyframes example {
0%, 100% {
margin-left: -200px
}
10%, 90% {
margin-left: 0px
}
}
set the animation delay to 1s.
you need to experiment with the percentages for your need
The second div is going to its original state after the animation.
This will set the css stile after the animation is over
animation-fill-mode: forwards;
Related
I have a css background animation that separate the screen into 2 color part, div 1 left is black and div 2 right is white. However I want to make the div 2 right white part to become a image background while black part remain.
How do I insert the image cover into the right white part without affect the left black part
this is the example image cover I would like to cover in div 2
below is my code
body,
html {
margin: 0;
padding: 0;
}
.bg {
min-height: 100vh;
animation: BgAnimation;
-webkit-animation: BgAnimation;
-moz-animation: BgAnimation;
background: linear-gradient(106deg, #313131 50%, white 50.1%);
animation-duration: 1.3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
background-size: 200% 200%;
}
#keyframes BgAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 50% 50%;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
color: white;
margin-left: 10%;
margin-top: 20%;
animation: fadein 3s;
}
#right {
flex: 1;
margin-right: 5%;
margin-top: 20%;
font-size: 21px;
text-align: center;
animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s;
}
<body>
<div class="bg">
<div id="wrapper">
<div id="left">1 div</div>
<div id="right">2 div</div>
</div>
</div>
</body>
make your gradient black/transparent and put the image below it:
body {
margin: 0;
}
.bg {
min-height: 100vh;
background:
linear-gradient(106deg, #313131 50%, transparent 50.1%),
url(https://i.stack.imgur.com/bPLa1m.jpg) right;
animation: BgAnimation 1.3s forwards;
background-size: 200% 200%,80% auto;
}
#keyframes BgAnimation {
0% {
background-position: 0% 0%,right;
}
100% {
background-position: 50% 50%,right;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
color: white;
margin-left: 10%;
margin-top: 20%;
animation: fadein 3s;
}
#right {
flex: 1;
margin-right: 5%;
margin-top: 20%;
font-size: 21px;
text-align: center;
animation: fadein 6s;
}
<div class="bg">
<div id="wrapper">
<div id="left">1 div</div>
<div id="right">2 div</div>
</div>
</div>
I have 2 elements one is rect and another is line. I move rect from left to right once that is done then I rotate line. Then what I want is that once the line is rotated then I want to change the background color of rect.
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s;
animation-fill-mode: forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
#-webkit-keyframes move {
to {
left: 200px;
}
}
#-webkit-keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="rect"></div>
<div class="line"></div>
JSFiddle
you can multiple animation separated with comma.
Just add animation delay to second animation which changes the color
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s, colorChange 1s 2s;
animation-fill-mode: forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
#-webkit-keyframes move {
from {}
to {
left: 200px;
}
}
#-webkit-keyframes rotate {
from {}
to {
transform: rotate(360deg);
}
}
#keyframes colorChange {
to {
background-color: green;
}
}
<div class="rect"></div>
<div class="line"></div>
You don't need an additional animation, you just need to adjust the keyframe % and change the duration to 2.3s, which is 1s + 1.3s, if you want the color change to happen simultaneously at the end, if not then adjust the % accordingly:
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
animation: move 2.3s forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s 1.3s forwards;
}
#-webkit-keyframes move {
43.48%, 100% {left: 200px} /* 100% / 2.3 = 43.48% (around), which is 1s duration (like before), then keep it there till the end (100%) */
0%, 99.99% {background: red} /* keep it red 99.99% of the time */
100% {background: blue} /* but not 100% */
}
#-webkit-keyframes rotate {
to {transform: rotate(360deg)}
}
<div class="rect"></div>
<div class="line"></div>
How's this?
In .rect, add a second animation:
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s, turnGreen 2.3s;
animation-fill-mode: forwards;
}
Then define the new animation:
#-webkit-keyframes turnGreen{
0% {background: red;}
99% {background: red;}
100% {background: green;}
}
I tested this on your JSFiddle and it seemed to work as you described.
I'm trying to make this div move smoothly while changing colors, but the problem is that right before it should transition into the #bad455 color, it stops briefly.
So I was wondering are there any ways to make it go smoothly without no stopping?
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 20px;
}
100% {
background-color: #bad455;
margin-top: 30px;
}
}
<div></div>
You set the iteration count to infinite so your animation keeps going and set the margin of your last keyframe back to 0 so it returns to it's default state.
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 30px;
}
100% {
background-color: #bad455;
margin-top: 0px;
}
}
<div></div>
Try this in your div tag:
-webkit-transition: width 2s;
transition: width 2s;
I have this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
But I want something like this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
#keyframes translate {
from {top: 10px;}
to {top: 0px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
EDIT: I probably didn't explain this well enough. What I meant is, is there a way to keep the bottom of the div touching the line witout using any sort of animation to move it up and down? I want it to be dynamic, so that if I change the value of the rotation, I won't have to calculate and change the value of the translation.
EDIT2: Simply put: I just want the div to do what the second example is doing without needing a specific value for the vertical movement.
You should play with values to get it perfect but this is the idea:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
0% {transform: rotate(-30deg); top: 10px;}
50% {top: 0px;}
100% {transform: rotate(30deg); top: 10px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
I'm not sure that this is what do you expect, but I will give it a try.
* {
margin: 0;
padding: 0;
}
div {
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite;
}
hr {
position: absolute;
top: 99px;
width: 99%;
}
#keyframes rotate {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
#keyframes stretch {
0% {
height: 112px;
}
50% {
height: 100px;
}
100% {
height: 112px;
}
}
<div></div>
<hr>
I want the progress bar to go from 0% width to 50% width in 2 seconds. This is my code so far:
<style>
#progressbar {
background-color: #000000;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
</style>
<div id="progressbar">
<div></div>
</div>
but when I open the page the width is 100% instead of 50%. what have I done wrong?
Your loadbar animation was not closed. The animation should work now. I've also added a forwards keyword to only play the animation once.
#progressbar {
background-color: black;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s normal forwards ease-in-out;
-webkit-animation:loadbar 2s normal forwards ease-in-out;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Here's a Fiddle
#progressbar div {
background-color: #0063C6;
width: 50%;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
jsFiddle demo
Set the initial width to 0%
#progressbar div {
background-color: #0063C6;
height: 10px;
width:0%; /* ADD THIS <<< */
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Additionally, I added in the following..
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
If you want the animation to end in a forwards motion you need this... here is a demo demonstrating what would happen without it.. jsFiddle here