ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
hsla(0,100%,70%,1) 15%,
hsla(0,100%,60%,.3) 28%,
hsla(0,100%,30%,0) 70%
);
background-repeat: no-repeat;
transition-property: background-position, transform;
transition-duration: .15s, .25s;
transition-timing-function: cubic-bezier(.8, 0, 1, 1);
}
input:checked {
transition-property: background-position, transform;
transition-duration: .2s, .25s;
transition-delay: .15s, 0s;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
}
input:active { transform: scale(1.5); transition: transform .1s cubic-bezier(0, 0, .2, 1); }
input,input:active { background-position: 22px 0; }
input:checked { background-position: 0 0; }
input:checked ~ input, input:checked ~ input:active { background-position: -22px 0; }
■ Note the appearance property is intended to remove all preconfigured default styles from an element or to
allow elements to take on the look of other elements (for example, to style a span as a textbox). appearance was
proposed for CSS3, but did not enter the spec of the UI module, although it is being considered for future iterations of
the specification. the property has prefixed support in Webkit, and partial prefixed support in firefox. for that reason,
at the time of writing this, the code shown in listing 4-40 will work best in Chrome.
Once you get past the complexities of the hsla color gradient (great for creating different colored “tell-tale”
lights) the rest of the code is simple: the radio buttons are made larger on focus, and on release the background-
image of the radial gradient moves to the position of the button.
Summary
In this chapter you’ve looked at some of the ways CSS3 transitions can be used to enhance user interface
elements, from forms to site navigation. There are an endless number of possibilities, which I will leave to your
imagination and experimentation.
For all their usefulness, transitions are limited by two facts: they rely on some sort of user action to start
them, and they always animate between two points or states. Moving objects in a curve is impossible with
transitions, as is having them loop or run by themselves. All of those features are the purview of the CSS
Animations module (which I refer to as “keyframe animations” to further distinguish them from transitions).
I will be discussing that module in the next chapter.