CSS3-Transition-speaking

CSS3-Transition-speaking CSS3 Transition

The css property value is smoothly transitioned within a certain period of time;

Transition mainly includes four attribute values:

Transition-property

The attributes for performing the transformation. all is used for all attributes of the application;

Transition-duration

Animation duration; pay attention to the unit s or ms

Transition-timing-function

During the duration, the conversion rate changes, including:

Lag: the default item. The animation effect starts slowly and then accelerates. After it reaches the midpoint, it slows down and finally reaches the destination slowly.

Slow-in-out: similar to slow, acceleration and deceleration are softer.

Slow-in: starts slowly, but the acceleration and stop curves are steep.

Timed-out: starts fast and stops slowly.

Linear: linear average rate, usually due to changes in the color and opacity attributes

Cubic-bezr function: Custom speed mode tools available: http://cubic-bezier.com/#.17,.67,.83,.67

Transition-delay

The real significance of delay is that it specifies the sequence of animation occurrence, so that multiple different transition can be connected together to form a complex effect.

Transition must be triggered by an event, so it cannot automatically occur during webpage loading.

Example:

Abbreviation:

img{    transition: 1s 1s height ease;    -webkit-transition: 1s 1s height ease;}

Write separately:

img{    transition-property: height;    transition-duration: 1s;    transition-delay: 1s;    transition-timing-function: ease;}

Advanced method of transition:

p#animate {    width: 10em;    background-color: #F00;    border-radius: 5px;    transition-property: width, border-radius, background-color;    transition-duration: 1s, 2s;    transition-timing-function:  ease, ease-out, linear;}p#animate:hover {    width: 20em;    background-color: #00F;    border-radius: 50%;}

Note that there are only two transition-duration values, so the background-color of the third transition-property attribute loops to the first one, that is, its transition-duration value is 1 s;

Note:

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;}

Effects made with CSS3 Transition: http://leaverou.github.io/animatable/

References:

Http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

Http://www.w3cplus.com/content/css3-transform

Http://beiyuu.com/css3-animation/

Http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

Http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html