Maintaining CSS Style States using “Infinite” Transition Delays

Earlier today I discovered an interesting way to keep (store) a CSS style on an element using CSS transitions. This is probably best explained
with an example, so here goes:

This text will only have the color while the button is pressed down.

This text will keep the given color even after the button is released.

As far as CSS only solutions go, there are two other tricks that can be used to achieve this similar behavior: using either the :checked or the :target pseudo selectors. In this post, I’ll show you my CSS transition technique used above, followed by a
slightly cooler example that I’ve been working on.

The HTML

<button class="red">Red</button>
<button class="green">Green</button>
<button class="blue">Blue</button>
<p>
This text will only have the color while the button is pressed down.
</p>
<p class="perm">
This text will keep the given color even after the button is released.
<p>

The JavaScript

// Absolutely none

How It Works

It’s actually pretty simple. With our first CSS declaration, we’ve made it so that any changes to the color property will be delayed by approximately 116 days ( :D ). This virtually infinite delay makes sure that the color stays the same once we’ve set it.

The trick now is to somehow temporary get around this delay, so we can apply the different colors with the buttons. This is done by overriding the transition property during the button press, setting the delay to 0. Now when we release the button, the old transition property will kick back in, setting the delay to 116 days. This will make sure that the text will keep the new color instead of going back to the default.

As far as I know, this only works with animatable properties, but a cool fact is that you can end a transition halfway through and have the property still keep the exact value that it had at that point in the transition. So for example, let’s say we have a linear transition from opacity 1 to 0 over two seconds, but only let it run for one second. The opacity value should now be stuck at 0.5 because the delay prevents it from going back. If we now were to run the opacity transition again, it would continue from 0.5 instead of starting over from the beginning.

Now, before you run off and start using this technique all over the web, keep in mind that this is a very dirty hack for achieving something with CSS that ideally should be done with JavaScript.

Taking it a step further

As I mentioned, I’ve been working on something cool to show this off, so make sure to check out the demo below.

Very cool! Only thing I noticed as a bug is if I click on one direction multiple times the characters animation and movement speed decrease for that direction, until you travel in a different direction then the speed is reset to normal.

JoelBesada

Yeah, the closer you are from an edge when you start walking, the slower the character will move. This is because it always transitions toward the edge of the direction over 2 seconds, so if you’re already close to the destination you’ll move much slower.

http://leaverou.me Lea Verou

You can solve that by using transition-timing-function: linear;

JoelBesada

I already am, that’s not the core problem. Let me see if I can explain this a bit clearer.

Whenever you hold down one of the directional buttons, a 2 second transition starts to move the character towards the correlating wall. This transition will *always* be 2 seconds, regardless of how far the character has to move.

Let’s say you start moving the character towards a wall that is 200 pixels away. This means you’ll move at a speed of 100 pixels per second. Now, let’s say that you release the button after one second, and then press it down again. The remaining distance, 100 pixels, will now also be transitioned over 2 second duration, which means the character now moves at a speed of 50 pixels per second.

I don’t think there is any solution to this as far as CSS goes.

http://leaverou.me Lea Verou

Oohh, I get it now. Yeah, can’t think of a solution either. I’ve often wished transitions allowed speeds not just durations.

Alan_F

Redraw the background as water that gets deeper towards the edges – problem solved.

http://blog.johnpencola.com/ John Pencola

Good idea… except for when you reverse direction while in the water ;)

http://loneplacebo.com/ Tony Hue

Neat trick!

Krupinski Rafal

If you fall asleep during play, lets say for 99999s, you can wake up with al your progress lost :D

http://georgedina.ro/ Dina George

Yeah, this seems legit :)

http://twitter.com/prisca_eyedea Prisca Schmarsow

very clever ;) love it ~ thanks for sharing ;)

http://twitter.com/mplungjan Michel Plungjan

Is this supposed to work in Fx12 on OSX? I do not get the persistence

http://coderkid.co.cc/ Matt Curtis

Me and Mike are in the same boat – not working in my version of FF either (which would be 11.0)

Oh right, I forgot that Firefox needs the “s” for the time values in CSS transitions, even when it’s set to 0. Should work now.

cballenar

That’s pretty neat! I’m wondering if having multiple elements doing this could slow down the browser. It must be creating some kind of timer right? Thanks for sharing, I love to see CSS being used in new, devious ways :)

JoelBesada

Just having one or a couple of delay timers ticking in the background shouldn’t slow down the browser, but I haven’t done any research on this so I’m not 100% sure. This might also vary a lot between browsers.

Heya, very cool tip. I have another question though, whats upp with the use of this: ~ Haven’t seen this used in CSS before and would be glad to get a bit of input where to deepen on this. Does it actually do anything? Could I write the same with just a singe space between declarations? Couldn’t find any doc on use of that char ( ~ ).

Joe – great demo! In your demo on dabblet, you mentioned “ please keep in mind that things like this should ideally be handled with Javascript.” but I disagree! With CSS you can get native hardware acceleration from some browsers (not the case w JavaScript).

I don’t think this is a hack at all :) Totally legit way of building awesome web content!

WordPress Plugin Woocommerce Its really helpful article , i read it i just like your effort this shows how much you have interest in these type of articles i hope you will keep writing for us i like your effort.Thank you soo much for sharing an awesome information

Olivia

wao excellent and so amazing blog. The way you expressed and layout of CSS style is very great. thanks for sharing us important information.Windows 10 crack