Examples of transition in CSS3

1. A Scalable search Form

People who are always in the sf.gg know that the top navigation bar is this:

When the input box gets focus, it becomes this way:

Using the CSS3 Transition attribute, we can simply make a similar search form out of the list:

HTML Tags:

xml/html code to copy content to clipboard

1. < header >
2. < form action = method = "POST" class = "Searchform" >
3. < label for = "search" > search< / label >
4. < input type = "search" id =" "Search" name = "search" placeholder = "search" >
5. </ form
6. </ header >

CSS Style:

CSS code copy content to clipboard

*{

margin:0;

padding:0;

}

header{

Font-family:helvetica,arial,sans-serif;

Display:block;

Overflow:hidden;

width:500px;

margin:15px;

border-radius:3px;

Background-color: #ddd;

}

form.searchform{

/* containers containing label and input * *

width:200px;

margin:5px;

padding:5px;

}

Form.searchform input{

width:90px;

padding:2px 0 3px 5px;

Outline:none;

Font-size:1.2em;

Border-color: #eee #ccc #ccc #eee;

border-radius:10px;

/* The vendor prefix for the browser for the WebKit kernel * *

-webkit-transition:0.5s width;

}

Form.searchform input:focus{

width:400px; * * If the focus is lost, retract the original length * *

}

Form.searchform label{

Display:none; /* Callout is necessary, but do not show it.

}

Effect Chart:

Default:

Get Focus:

For those controls that can be entered, they are commonly called fields. Each form control (except the Submit button) has a corresponding label text element that describes the data that the control represents. So, a search box is a form of a field.

　2.CSS3 transition

Example:

CSS code copy content to clipboard

-webkit-transition:0.5s width;

Note: The transition attribute needs to be in the form of a vendor prefix--the example here is an attribute with only the WebKit (Chrome/safari) prefix.

CSS3 transitions allow CSS properties to animate. A style that changes very abruptly when triggered by certain events, such as changing the link color when hovering over a mouse, and gradually changing over a specified period of time using a transition. The first CSS rule sets the initial state and transition parameters of the property. The second CSS rule sets the target State of the property when the event occurs.

In general, a transition animation is triggered by the focus pseudo-class rule when the user hovers over the hover pseudo class rule and form elements. In addition, you can set a new state in a rule with a class name selector and then use JavaScript (or other JS class libraries) to add the class name to the element to trigger the transition, and the time to add the class name may be when the mouse clicks or other events occur.

There are five transition properties:

Transition-property, the transition of CSS property names, such as color, width;

Transition-duration, the duration of the transition, in seconds or milliseconds set, such as 2s, 500ms;

Transition-timing-function, the transition of the speed control function, determines whether the animation effect is smooth, is the first slow after fast Also

is first fast and slow, such as ease-in, Ease-out, ease-in-out or linear (default);

Transition-delay, the delay time before the transition begins, set in seconds or milliseconds, such as 1s, 200ms;

Transition, the abbreviated properties of the transition, such as transition:color 2s ease-in 1ms;.

Note: Many (not all) CSS properties can be animated by transition properties.