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 ?
Now you have learned it ?
没有评论:
发表评论