CSS transitions can be fiddly to hand-code from scratch, so Dreamweaver’s straightforward form-oriented workflow will be as welcome to dedicated hand-coders as to less technically inclined web designers.
Let's find out how it works.
In a new document, create a typical web form with a few fields (or just load an existing site with a form).
Go to Window > CSS Transitions to open the new panel. Click + to create a new transition and set Target Rule to ‘.highlight’ and ‘Transition On’ to ‘focus’.
Set ‘Duration’ to 1 and ‘Timing Function’ to ‘ease-in-out’. Click + under ‘Property’, choose ‘background-color’ and set ‘End Value’ to #ff9.
Hit the Create Transition button. Select your form fields in turn and apply the new (.highlight) class to them. (If they already have a class, add ‘highlight’ in code after the original value.)
Use Live view in Dreamweaver and clicking inside the form fields. You should find they turn yellow.
When a form field loses its focus, the yellow fades back to the original background colour. Experiment with further property values to create more complex transitions.
Craig Grannell is a designer and writer.