ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementSIf you are willing to disregard some issues of semantics, there are many possibilities for this checkbox
control. It can even be used in menus to hold states open (for example, as a series of tabs with content
underneath, or as an accordion menu).
Animating Form Elements with CSS3
It’s possible to extend transitions to modify the appearance of form elements directly. A simple example would be
a visual “wobble and fade-in” when information entered into a text element is incorrect, as shown in Listing 4-38
and Figure 4-9.
Listing 4-38. CSS for Simple Animated Form Elements
input { padding: 1rem; transition: .5s 2s all cubic-bezier(0.475, -0.600, 0.435, 1.650); }
input:invalid { border: 3px solid red; transform: translateX(10px); }
Figure 4-9. An animated, customized set of radio buttons
With some caveats, you can extend this to radio buttons, using a technique first proposed by Simurai
(http://simurai.com/). The basic markup is very simple: each radio button has the same name, meaning that
each button turns the others off when clicked. One radio button is automatically on by default, as shown in
Listing 4-39.
Listing 4-39. HTML for Animated Radio Buttons
Next comes the CSS, shown in Listing 4-40.Listing 4-40. CSS for Animated Radio Buttons
body, input { background-color: rgb(20%,20%,20%); }
input {
appearance: none;
margin: 10px; width: 22px; height: 22px;
border-radius: 50%; cursor: pointer;
vertical-align: middle;
box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset rgba(0,0,0,.5) 0 0 0 1px;
background-color: rgb(20%,20%,20%);
background-image: radial-gradient(
hsla(0,100%,90%,1) 0%,