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/
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>
I was discussing with someone the ability for CSS3 to do animations upon click and hover and I decided to make a little test to show them. I decided to do a bit of boundary pushing and made it so that when you hovered over the animation happened, and when you un-hovered it waited 3 seconds and then ran the animation to put it back.
The problem however is that when the page loads, it runs the "un-hover" animation.
Any ideas for getting around this or another method that's better?
What the below code does is when you hover over the red box it animates is blue. When you un-hover is animates it back red again after 3 seconds. Both of them calculate to a 1 second animation time.
I know this could be fixed with one very simple line of JavaScript, but I'm only interested in seeing if there's a CSS answer.
#-webkit-keyframes makeblue {
0% {
background: red;
}
100% {
background: blue;
}
}
#keyframes makeblue {
0% {
background: red;
}
100% {
background: blue;
}
}
#-webkit-keyframes makered {
0% {
background: blue;
}
75% {
background: blue;
}
100% {
background: red;
}
}
#keyframes makered {
0% {
background: blue;
}
75% {
background: blue;
}
100% {
background: red;
}
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: makered 4s;
animation: makered 4s;
}
div:hover {
-webkit-animation: makeblue 1s;
animation: makeblue 1s;
background: blue;
}
<div></div>
EDIT 1
Does anyone know if this type of functionality exists, or even potentially planned for the future?:
#keyframes makeblue {
0% {
background: [CurrentValue];
}
100% {
background: blue;
}
}
Having this would be able to fix the problem. If this doesn't exist, I think it should :).
If you are dealing with background or simple css only (not a keyframe animation), you can have it with transition delay, check it out at jsfiddle!:
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition:background-color 0.25s 3s linear;
}
div:hover {
background-color:blue;
transition:background-color 0.25s linear;
}
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)
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.