How to realize the smooth transition effect

Transition of CSS allows CSS attribute values in a certain time interval smoothly transition. This effect can be click on mouse click, focus, or for any change in the elements of trigger, and tactful to animation effects change the CSS property values.

Do you know this web page http://www.grindingmill.org/ that the effect of several ICONS at the upper right is how to implement? Here we step by step from its most grammar and attribute values used to learn the details of the transition.

Grammar:

 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

Transition mainly contains four attribute values: perform the transform properties: the transition - property, transform the continuation of time: the transition - duration, the extended period of time, change the rate of change the transition - timing - function, transform to delay the transition time - delay. Below to see the four attribute values, respectively.

一、transition-property:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

二、transition-duration:

transition-duration ： <time> [, <time>]*

三、transition-timing-function:

 transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

四、transition-delay:

transition-delay ： <time> [, <time>]*

Sometimes we will not only change the effect of a CSS properties, but to change two or more CSS properties of the transition effect, so we just put several transition statement strung together, separated by a comma (", "), then each may have different duration and the time rate of transformation methods. But need to note: the transition to delay and the transition to the value of the duration time, so want to distinguish them in the position of ligatures, general browser will be determined according to the order, the first time can be resolved as  values for the transition - duration for the second transition - delay. Such as:

a {

    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;

    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;

    -o-transition: background 0.5s ease-in,color 0.3s ease-out;

    transition: background 0.5s ease-in,color 0.3s ease-out;

  }

If you want to perform all the transition effect the properties of the elements, so we can also use all attribute values to the operation, at the moment they Shared the same duration as well as the rate of transformation, such as:

a {

    -moz-transition: all 0.5s ease-in;

    -webkit-transition: all 0.5s ease-in;

    -o-transition: all 0.5s ease-in;

    transition: all 0.5s ease-in;

  }

Corresponding to a sample code:

p {

  -webkit-transition: all .5s ease-in-out 1s;

  -o-transition: all .5s ease-in-out 1s;

  -moz-transition: all .5s ease-in-out 1s;

  transition: all .5s ease-in-out 1s;

}

Now you have learned it ?