Is it possible to block a Keyframes Animation with steps?
Is it possible to block a Keyframes Animation with steps?
I have two divs that I want to use them like bars for statistics where each bar has 200px of width.
200px
width
Inside the bar I want to animate a div, only one time, increasing the width and background-color.
div
@keyframes first
0% background-color: green; width: 0%
33% background-color: yellow; width: 33%
66% background-color: orange; width: 66%
100% background-color: red; width: 100%
I want to increase the first bar up to 150px (essentially, block the animation up to 150px and also block the background-color animation). Is this possible with CSS or jQuery?
150px
In this case is like to stop the animation at step 75%
I created a JSFiddle:
https://jsfiddle.net/gefz5wtL/3/
What do you mean ? change the last step ? In my case is important the color...bacause green must be at 0px and red at 200px
– Borja
Aug 24 at 12:57
2 Answers
2
An idea is to run and pause the animation using JS by adding/removing classes:
$('#first').addClass('first-start');
setTimeout(function()
$('#first').addClass('first-pause');
, 1500);
#page
margin-top: 50px;
width: 300px;
height: 200px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
#box-first,
#box-second
width: 200px;
height: 50px;
background-color: #fff;
border-radius: 8px;
margin-top: 10px;
margin-bottom: 10px;
@keyframes first
0%
background-color: green;
width: 0%
33%
background-color: yellow;
width: 33%
66%
background-color: orange;
width: 66%
100%
background-color: red;
width: 100%
@keyframes second
0%
background-color: green;
width: 0%
33%
background-color: yellow;
width: 33%
66%
background-color: orange;
width: 66%
100%
background-color: red;
width: 100%
#first
width: 100%;
height: 100%;
border-radius: 8px;
background-color: #fff;
.first-start
animation: first 2s infinite;
.first-pause
animation-play-state: paused;
#second
width: 100%;
height: 100%;
border-radius: 8px;
background-color: #fff;
animation: second 2s infinite;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="box-first">
<div id="first">
</div>
</div>
<div id="box-second">
<div id="second">
</div>
</div>
</div>
I think is a incredible idea bt i have only one doubt...if see the update jsfiddle.net/rdxnvjpw/11 i stop the animation at 1999ms when the width should be 99% and the color red... but a 1999ms the animation "start" again. I change the transition-timing-function, now is "linear"
– Borja
Aug 24 at 13:47
@Borja i don't see any issue, don't forget that the code applies to only the first one
– Temani Afif
Aug 24 at 13:58
To stop the animation when the bar "is full" (so width 100% and color red) how i have to set the setInterval ? see jsfiddle.net/rdxnvjpw/13
– Borja
Aug 24 at 14:02
@Borja no need interval for this .. simply add
forwards to the animation. so you only add the first class and no pause class– Temani Afif
Aug 24 at 14:05
forwards
ahhh ok yes ! Thanks a lot !
– Borja
Aug 24 at 14:09
You can use animation-fill-mode: forwards and animation-iteration-count: 1;
it will look like this:
#page
margin-top: 50px;
width: 300px;
height: 200px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
#box-first, #box-second
width: 200px;
height: 50px;
background-color: #fff;
border-radius: 8px;
margin-top: 10px;
margin-bottom: 10px;
@keyframes first
0% background-color: green; width: 0%
33% background-color: yellow; width: 33%
66% background-color: orange; width: 66%
100% background-color: red; width: 75%
@keyframes second
0% background-color: green; width: 0%
33% background-color: yellow; width: 33%
66% background-color: orange; width: 66%
100% background-color: red; width: 100%
#first
width: 100%;
height: 100%;
border-radius: 8px;
background-color: #fff;
animation: first 2s 1 forwards;
#second
width: 100%;
height: 100%;
border-radius: 8px;
background-color: #fff;
animation: second 2s infinite;
<div id="page">
<div id="box-first">
<div id="first">
</div>
</div>
<div id="box-second">
<div id="second">
</div>
</div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
why not adjusting the animation to 150px then? (75%)
– Temani Afif
Aug 24 at 12:55