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;
}
Related
I am trying to get an object to lead in with one CSS animation key frame set and then have it loop another key frame set forever. Is this possible?
Depends on what you are willing to do for it :)
I don't think that there is a solution to trigger the second animation from within the last keyframe of the first animation.
A possible solution would be to delay the second animation until the first one has finished like this:
#test {
height: 50px;
width: 50px;
background: grey;
animation: 2s firstAnimation forwards, 1s secondAnimation 2s alternate infinite;
/* the "2s" after "secondAnimation" is for the delay */
}
#keyframes firstAnimation {
100% {
width: 100px;
background: red;
}
}
#keyframes secondAnimation {
0% {
height: 50px;
}
100% {
height: 100px;
}
}
<div id="test"></div>
Another possible approach is to verify with javascripts onanimationend and then add the second animation by adding a class for example:
let test = document.getElementById("test")
test.onanimationend = function(event) {
console.log(event) // contains a lot of interesting infos like the name of the animation that ended :)
test.classList.remove("startFirstAnimation")
test.classList.add("startSecondAnimation")
}
#test {
height: 50px;
width: 50px;
background: grey;
}
.startFirstAnimation {
animation: 2s firstAnimation forwards;
}
#keyframes firstAnimation {
100% {
width: 100px;
background: red;
}
}
.startSecondAnimation {
width: 100px !important; /* cheating a little bit here to keep the state of the end of the firstAnimation... */
background: red !important;
animation: 1s secondAnimation alternate infinite;
}
#keyframes secondAnimation {
0% {
height: 50px;
}
100% {
height: 100px;
}
}
<div id="test" class="startFirstAnimation"></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'm working on a css animation to switch the background color of an element.
This animation is only two phases and no smooth transitions between both phases.
It means, the first 50% of the animation, the background color will be blue, and the last 50% of the animation, the background color will be grey, without an transition in between.
Here's the animation fully working:
div {
width: 200px;
height: 200px;
animation: bg 4s linear infinite;
}
#keyframes bg {
0% {
background: blue;
}
50% {
background: blue;
}
50.00001% {
background: grey;
}
100% {
background: grey;
}
}
<div></div>
I'm wondering if there's a simpler way to do that. What I'm looking for is to use only from and to inside the keyframes without any additional step.
You can achieve it using the animation-timing-function: steps(1) as given in below snippet. You can find more details about the animation-timing-function here and the generic steps value here in MDN.
div {
width: 200px;
height: 200px;
animation: bg 4s steps(1) infinite;
}
#keyframes bg {
0% {
background: blue;
}
50% {
background: grey;
}
}
<div></div>
Note: I have set the keyframe for grey color at 50% instead of 100% due to the problem discussed in this answer.
You can also use a short-cut notation :
div {
width: 200px;
height: 200px;
animation: bg 4s linear infinite;
}
#keyframes bg {
from, 50% {
background: blue;
}
50.00001%, to {
background: grey;
}
}
<div></div>
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/
Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2)
#-webkit-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
#-moz-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?).
My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see http://jsfiddle.net/Vzq4B)
#permanent {
height: 100px;
margin-bottom: 15px;
width: 100%;
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
}
#hover {
position: relative;
top: -115px;
margin-bottom: -100px;
height: 100px;
width: 100%;
background: #fff;
}
#hover:hover {
background-color: transparent;
}
However, this approach will only work if I know the height of my elements, which I don’t since the content is variable.
Which other ways are there to achieve this effect for divs of unknown height?
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
HTML:
<div id="container">
<div id="child">Your content.</div>
</div>
CSS:
#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Why don't you try this:
#hover:hover {
height: auto;
width: 100%;
outline: 1px solid #999; /* only style */
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
cursor: pointer;
}
There is a link: http://jsfiddle.net/nmL9s/
Thanks...