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.
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 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>
Hi I am trying to implement css animation, i have implemented #keyframes
but my animation is not applied to my div.
my keyframe is
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Please tell me where i am wrong.
You have done everything right but you haven't created the class which will implement animation
Create two css class as follows
.fadeIn {
animation-name: fadeIn;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
animation-name is the name of your keyframes in your example i.e. fadeIn.
Now use those two class in your div where ever you want to implement.
Hope this helps.
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
0% {top: 0px;opacity:0;}
100% {top: 100px;opacity:1;}
}
</style>
<div></div>
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');
})
Is there any way / trick to have transition keeping its state just like animation-fill-mode?
<style>
#firstdiv {
width: 100px;
height: 100px;
background: red;
animation: firstdivframe 2s;
animation-play-state: paused;
animation-fill-mode: forwards;
}
#firstdiv:hover {
animation-play-state: running
}
#keyframes firstdivframe {
from { background: red; }
to { background: yellow; }
}
#seconddiv {
width: 100px;
height: 100px;
background: red;
transition: background 2s;
}
#seconddiv:hover {
background: yellow;
}
</style>
<div id="firstdiv"></div>
<br />
<div id="seconddiv"></div>
jsbin
Based on above code, I want the seconddiv to behave just like firstdiv without using any javascript code. The firstdiv will keep its state when the mouse stops hovering or the animation ends, while the seconddiv will always go back to its original state.
No it is not possible to use transitions for this. CSS transitions will only transition between styles (hence the name). If you want to keep a state you have to added a class, for which you always need JavaScript.
I think that this is what your are looking for
#firstdiv {
width: 100px;
height: 100px;
background: red;
animation: firstdivframe 2s;
animation-play-state: paused;
animation-fill-mode: forwards;
}
#firstdiv:hover {
animation-play-state: running
}
#keyframes firstdivframe {
from { background: red; }
to { background: yellow; }
}
#seconddiv {
width: 100px;
height: 100px;
background: red;
animation: seconddiv 2s;
animation-play-state: paused;
animation-fill-mode: forwards;
}
#seconddiv:hover {
animation-play-state: running
}
#keyframes seconddiv {
from { background: red; }
to { background: yellow; }
}
ckeck if it works: jsbin
Please tell me if this is what you are looking for and then i will provide you a more "best-technic" solution with an explanation in each line. (i cannot currently comment).
Yes, of course! Think about setTimeout! You can use setTimeout with the same duration as you have in transition! And the call-back function of setTimeout should set the back the style that you want to keep it!