CSS Transitions

Wow, I missed something. Or at least I was thinking about it backwards at the time of writing about LESS mixins (and this update to it). I totally missed on how CSS transitions actually work, and what the values are. I mean, I still achieved my desired result, but I was off on actual implementation.

What's the problem?

My wrong use of a transition was in a LESS mixin that looked like this:

.transition(@property:left,@ease-in-duration: 0.3s,@ease-out-duration: 0s) {
    transition: @property @ease-in-duration ease-in-out @ease-out-duration;
    -webkit-transition: @property @ease-in-duration ease-in-out @ease-out-duration;
    -moz-transition: @property @ease-in-duration ease-in-out @ease-out-duration;
    -o-transition: @property @ease-in-duration ease-in-out @ease-out-duration;
}

This isn't terrible. Like I said, I achieved the desired result. The issue is really in the naming of my variables. The first one, @property, is accurate. It specifies which property is being transitioned. However, @ease-in-duration should really just be @duration. It defines simply that, the duration of the transition. I have no idea why I named it what I did, but I have a much clearer understanding of it now. My 3rd variable, @ease-out-duration is the worst. Just stupid of me. This value has nothing at all to do with 'easing', in or out. It is actually the delay of the transition.

How to fix it

There are actually 4 different properties that can be set on a transition. Using only transition:, is actually short hand for individually defining each property. For example, using the default in my LESS, the resulting CSS would have looked like this (plus definitions with browser prefixes):

transition: left 0.3s ease-in-out 0s;  

This is, in fact, shorthand for this:

transition-property: left;  
transition-duration: 0.3s;  
transition-timing-function: ease-in-out;  
transition-delay: 0s;  

The first property is transition-property. This can actually specify more than just one CSS property should be transitioned. Possible values:

Value Description
none No property will get a transition effect
all Default value. All properties will get a transition effect
property Defines a comma separated list of CSS property names the transition effect is for
initial Sets this property to its default value.
inherit Inherits this property from its parent element

Next is the transition-duration property. This sets the amount of time (seconds or milliseconds) a transition takes to complete. Possible values:

Value Description
time Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0, meaning there will be no effect
initial Sets this property to its default value.
inherit Inherits this property from its parent element

After durations is transition-timing-function. This is the one I didn't have as a variable in my mixin, but should have. This specifies the speed curve of the transition. Possible values:

Value Description
ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial Sets this property to its default value.
inherit Inherits this property from its parent element

The final property, transition-delay, specifies when the effect will start. Same possible values as duration:

Value Description
time Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0, meaning there will be no effect
initial Sets this property to its default value.
inherit Inherits this property from its parent element

So, now that I have a clearer understanding of these properties, my LESS mixin looks like this:

.transition(@property:left,@duration: 0.3s,@timing-function:ease-in-out,@delay: 0s) {
    transition: @property @duration @timing-function @delay;
    -webkit-transition: @property @duration @timing-function @delay;
    -moz-transition: @property @duration @timing-function @delay;
    -o-transition: @property @duration @timing-function @delay;
}

I can now pass in all the options, and they are accurately named.

More mixins coming soon...