An expanding search field is quite useful because it remains contracted when not in use, thus saving space on your page, but will expand when the user interacts with it, which communicates that the web page is responding to the user’s actions. It’s as if the search box is saying “yes, I see you want to use me, I am ready, let’s go.” It’s a nice little microinteraction.
With that said, let’s go ahead and dissect how this CSS animation works.
Quite simply, the heart of this microinteraction is with the CSS “transition” property, which at the time of this writing is supported by IE10, Firefox, Chrome, and Opera. Both Safari and Chrome 25 (and earlier) require the vendor prefix -webkit- to use the transition property. For IE9 and before, there are CSS transition property polyfills available out there.
Let’s take a look at that transition property:
-webkit-transition: all .4s;
transition: all .4s;
According to w3schools.com, there are four transition properties.
In this example, we see two of those explicitly defined. First, the “all” property means this transition applies to all CSS properties related to HTML elements with the “searchfield” class. The .4s property means the transition effects will take 400 milliseconds, or nearly half a second. The two properties not seen fall back to their respective defaults:
- transition-timing-function: ease;
- transition-delay: 0;
Other timing function values that could be used are linear, ease-in, ease-out, ease-in-out, and cubic-bezier(n, n, n, n) where you define your own values for “n” as desired.
As you can see in the code, the CSS transition property is set for both the search field and the submit button (magnifying glass) identically.
The only HTML we have is a form with two inputs, one for said search field and the other for the submit button, which may or may not even be desired depending on if you have a traditional button outside of the search field instead.
In any case, we set the search field to a width of 250px along with some other attributes just to give it a little more polished look. Using the :focus selector on the search field allows us to define new styles on the search field, namely the width. Because the search field has the transition property applied to it with a duration of .4s, upon focus, the width will “animate” or transition from the width at which it was already set to the new width. In this case, when the search field receives the focus, it expands from 250px to 500px. And as you might expect, when it loses focus, the width animates over a .4s duration from 500px to 250px.
It’s really just that simple.
As always with CSS3 properties, consider graceful degradation for browsers that do not support certain CSS properties you’ve implemented.