I was playing with CSS animation, making some text go from one colour to another. This would work but it would then finish off with putting the text back to the original colour of the text. What's going on here and how do I stop it from happening?
body {
background-color: black;
color: red;
}
#l0 {
animation-name: fadein;
animation-duration: 4s;
animation-timing-function: linear;
}
#keyframes fadein {
from {
color: black;
}
to {
color: white;
}
}
<body id="l0">
<h1>
Hello
</h1>
</body>
Do I have to also set the class of the object to say "stay at this colour"?
This is the default behavior of animation, to make the animated element retain the last value, you have to set the animation fill mode to forwards like so
animation-fill-mode: forwards
body {
background-color: black;
color: red;
}
#l0 {
animation-name: fadein;
animation-duration: 4s;
animation-timing-function: linear;
animation-fill-mode: forwards
}
#keyframes fadein {
from {
color: black;
}
to {
color: white;
}
}
<body id="l0">
<h1>
Hello
</h1>
</body>
Related
I would like to use a single #keyframes rule to animate an element from one state to another and then to get back to the original state when I do an action (with the same animation). I saw that using animation-direction: reverse; is a way to play the animation in reverse. However, when I try to use it, the transitions on my element disappear. If I set a new #keyframes with the reversed state it works fine.
What is the point of animation-direction in this case? I am misunderstanding something?
Is there a way to play an animation in both directions with a single #keyframes rule without loosing the transitions? I can't use transition, I need animation.
Here is a example to play with (hover the squares):
div {
width: 100px;
height: 100px;
animation: fade 0.6s ease-in-out forwards;
margin: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
#box-1:hover {
animation: fade 0.6s ease-in-out forwards;
animation-direction: reverse;
}
#box-2:hover {
animation: fadeReverse 0.6s ease-in-out forwards;
}
#keyframes fade {
0% { background: red; }
100% { background: blue; }
}
#keyframes fadeReverse {
0% { background: blue; }
100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
It's because you apply the same animation to the element on hover as the animation that is on the default state of the element.
So the element already had that animation with the default direction but then you apply it again with the reverse. But it won't work. I don't really know why this happens. But applying the same animation on an element twice, won't work. So you need 2 different keyframes.
You can use a reverse animation or duplicate the existing one and use it with direction: reverse
Read more here
restart animation
more info here
another article here
If you REALLY want to use just 1 animation this can be solved with javascript by removing and adding an 'animate-me' class . But it still wouldn't be ideal
div {
width: 100px;
height: 100px;
animation: fade 0.6s ease-in-out forwards;
margin: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
#box-1:hover {
animation: fade2 0.6s ease-in-out forwards;
animation-direction: reverse;
}
#box-2:hover {
animation: fadeReverse 0.6s ease-in-out forwards;
}
#keyframes fade {
0% { background: red; }
100% { background: blue; }
}
#keyframes fade2 {
0% { background: red; }
100% { background: blue; }
}
#keyframes fadeReverse {
0% { background: blue; }
100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
I am trying to make an animation on a button which change the color and background-color from white to black.
I don't want any fade and so I found that I can use animation-timing-function: step.
However when I use it the animation doesn't reach black, it stops at grey.
.animated-play-btn {
background-color: white;
height: 50px;
width: 200px;
animation-timing-function: steps(2, end);
animation-duration: 1s;
animation-name: clipping_btn;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes clipping_btn {
from {
background-color: #000;
color: white;
}
to {
color: black;
background-color: #fff;
}
}
<button class="animated-play-btn">
coucou
</button>
Here the demo.
Any one have an idea how to do this (no JS of course)?
This seems to be sort of a "grey" area (pun intended) with respect to the steps() timing function for animations.
What seems to happen is that when you use steps(2, end), the animation is supposed to have two steps - one is from black background + white color to an intermediate state (where both are gray) and then another from the intermediate state to white background + black color (the end state) but the 2nd step happens right at the end of the animation and at almost the same time that the element is going to its original state to start the next loop. So, it kind of creates an impression that the white background + black color never happens.
The solution that seems to be working is to use steps(1, end) with the start and end states as black background + white color while the half way stage is white background + black color. I don't have any conclusive explanation on why this works but the point is that it does work.
This article at designmodo is the only one that I've found about this topic but I am still finding it difficult to explain the reason for this behavior. The one thing which we can be certain about after seeing this example is that if steps(n, start) is used, the car never comes to start position whereas if we use steps(n, end) it never reaches the end point. It is a 4 step animation but only three steps are visible, the other step happens right at the start or the end (depending on the parameter).
Solution:
.animated-play-btn {
background-color: white;
height: 50px;
width: 200px;
animation-timing-function: steps(1, end);
animation-duration: 1s;
animation-name: clipping_btn;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes clipping_btn {
0%, 100% {
background-color: #000;
color: white;
}
50% {
color: black;
background-color: #fff;
}
}
<button class="animated-play-btn">
coucou
</button>
The solution is to add on step and change:
animation-timing-function: steps(2, end);
by
animation-timing-function: step-end;
Here the new css:
.animated-play-btn {
background-color: white;
height: 50px;
width: 200px;
animation-timing-function: steps(1, end);
animation-duration: 1s;
animation-name: clipping_btn;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes clipping_btn {
from {
background-color: #000;
color: #fff;
}
50%{
color: #000;
background-color: #fff;
}
to {
background-color: #000;
color: #fff;
}
}
Is it possible to run again css animateion without js?
#-webkit-keyframes aaa {
to {
background: red;
}
}
input:checked + div {
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: aaa;
-webkit-animation-duration: 1s;
}
div {
width: 100px;
height: 100px;
background:blue;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: aaa;
-webkit-animation-duration: 1s;
}
When checkbox is checked i want to run again my animation?
<input type="checkbox" />
<div></div>
enter link description here
I've been trying to solve your issue with just one keyframe declaration.
As DarkFalcon points out you can solve it by declaring two different keyframes and apply one for the :checked and the other for the initial state.
Code Snippet
#keyframes aaa {
to {
background: red;
}
}
#keyframes bbb {
to {
background: red;
}
}
input:checked + div {
animation-name: bbb;
}
div {
width: 100px;
height: 100px;
background:blue;
animation-fill-mode: forwards;
animation-name: aaa;
animation-duration: 1s;
}
<input type="checkbox" />
<div></div>
If I find another way around this, where you don't need two declared keyframes I'll update my answer.
I'm calling an animation like this:
document.getElementById('banner').className = "changeColorToIndigo";
Then I've got the CSS property:
div.changeColorToIndigo {
animation-duration: 1s;
animation-name: changeColorToIndigo;
animation-fill-mode: forwards;
}
And the keyframes animation:
#keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}
But the animation goes back to it's initial state after the animation has completed, why is that? I've set the fill mode to forwards and specified the to (100%) property.
I've put your code in a Fiddle, and it works fine for me
HTML
<div id="banner"></div>
CSS
div{
height: 40px;
width: 40px;
background-color: #00BBD2;
}
div.changeColorToIndigo {
animation-name: changeColorToIndigo;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}
jQuery
$(document).ready(function(){
$('#banner').addClass('changeColorToIndigo');
})
I'm working on my first CSS keyframe animation and would like to know how it would be possible to pause an animation after it finishes its first run-through. You can check out my site here: http://www.tommaxwell.me and the grey quote at the bottom has a hover animation that you can see. However, once the animation is over it resets. How should I go about stopping it so that it stays in the end state of the animation when it's finished?
I know the use of a keyframe animation in this case is kind of lame and unnecessary, but I'm really just testing out keyframes, and will use it better later. :)
As #Mr. Alien answered, transitions is to prefer for this, but since you asked - it is possible to maintain the last state in an animation.
You do this by adding animation-fill-mode: forwards;
Here's a demo
Here's the code from my example:
HTML
<div class="text">Hover here</div>
CSS
.text {
color: blue;
}
.text:hover {
-webkit-animation: color 1.0s ease-in forwards;
-moz-animation: color 1.0s ease-in forwards;
-o-animation: color 1.0s ease-in forwards;
animation: color 1.0s ease-in forwards;
}
#-webkit-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-moz-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-o-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#keyframes color {
0% { color: blue; }
100% { color: red; }
}
Here's a good resource if you want to read about the the ‘animation-fill-mode’ property.
http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
I know what you are doing here, use CSS transition instead
Demo
.class {
color: #ff0000;
transition: color 2s;
-moz-transition: color 2s; /* Firefox 4 */
-webkit-transition: color 2s; /* Safari and Chrome */
-o-transition: color 2s; /* Opera */
}
.class:hover {
color: #00ff00;
}
You wont be able to preserve the hovered state of your text, for that you need to use JavaScript