i am trying to set animation to an #Element, but animation is only working when I use "infinite" word:
animation: AnimationName 1s linear 0s infinite normal both !important;
it does not work when I use a number instead of "infinite"
I want to play only one time the animation.
I have tried with the next code too:
#Element
{
animation-name: ANIMATION !important;
animation-duration: .5s !important;
animation-iteration-count: infinite !important;
}
#-moz-keyframes ANIMATION {
0% { background: GREEN; }
100% { background: RED; }
}
#keyframes ANIMATION {
0% { background: RED; }
100% { background: GREEN; }
}
I use it on Firefox Nightly 22.0a1 (2013-03-23)
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'm trying to use CSS variables as the background-color values. I got it to work in Chrome but not in Edge browser. I'm not sure if I did something wrong or it is a bug with the Edge browser.
In this example, the square change background-color from blue to red. But in Edge it's remains white.
:root {
--blue-color: blue;
--red-color: red;
}
#keyframes animatedBackground {
0% { background-color: var(--blue-color); }
100% { background-color: var(--red-color); }
}
#animate-area {
width: 100px;
height:100px;
animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
Here is temporary work around if anyone needs it: If I use the CSS variable as the static background color, the animation will start to work. This feels totally random but it seems to solve the problem.
:root {
--blue-color: blue;
--red-color: red;
}
#keyframes animatedBackground {
0% { background-color: var(--blue-color); }
100% { background-color: var(--red-color); }
}
#animate-area {
width: 100px;
height:100px;
background-color: var(--blue-color); /* this fixed it! */
animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
Is it possible to change the background color of <p> element after few seconds ( 10 to 20 seconds ) using css fiddle? I don't want to use js.
<p style="background:#E1FEE0;">Human</p>
Using a CSS animation, you could just jump from 99.9% to 100%. Just set the initial background color (#E1FEE0) within 99.9%, then the final background color within 100%. If you want the color to transition, just increase the gap and use something like 80% for example.
Example Here
p {
display: inline;
animation: background-fade 10s forwards;
}
#keyframes background-fade {
99.9% {
background:#E1FEE0;
}
100% {
background:#000;
}
}
Other vendor prefixes omitted for simplicity and brevity.
Actually You can.
You should use CSS animation to achieve this.
Here's example of CSS declaration:
#-webkit-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-moz-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-o-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
.animated {
-webkit-animation: change-color 2s infinite; /* Safari 4+ */
-moz-animation: change-color 2s infinite; /* Fx 5+ */
-o-animation: change-color 2s infinite; /* Opera 12+ */
animation: change-color 2s infinite; /* IE 10+ */
}
Try this on JSFiddle.
For more reading, here's the link about CSS animations.
Let's say I have a simple element:
Click
Now I can change the look of this element on click via :active:
#btn:active {
background: red;
}
What I'd like however is that the element will stay red for about a second after I clicked it without altering the HTML (so no checkbox hack) or javascript. Is there a smart trick that can be abused for this?
JsFiddle here
Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened:
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
You can use CSS3 animations and trigger with the :focus & :active...
Now, you can activate the effect with just pressing the TAB key...
But if you need to activate it with a mouse click.... and in a a tag you need to set the focus to the object, so some javascript is required. (inline in this case)
If you can use another object, let say an input type="text" then the focus it's automaticly set when you do the click, but in this case the focus action it's given by the browser.
So, the inline JS required is:
Click
And the CSS3 code
#btn {
background: yellow;
}
#btn:focus, #btn:active {
-webkit-animation: btn-color 1s forwards linear;
-moz-animation: btn-color 1s forwards linear;
-ms-animation: btn-color 1s forwards linear;
-o-animation: btn-color 1s forwards linear;
animation: btn-color 1s forwards linear;
}
#-webkit-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#-moz-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#-ms-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#-o-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
#keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
See a working fiddle update: http://jsfiddle.net/s3G7p/1/
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