CSS Transition (Transform animation)

recently learning CSS in the process, found a lot of useful things. Including some magical, pure css effects, just a few simple strokes to completeJquerythe effect of the implementation.

CSS 3 provides a property,Transition (transform), that enables the transition to occur when the values of some of the elements of an element change. For example, the length increases, can produce the similar elongated animation effect, when the color changes, can also use the transition to produce a color gradient effect.

• Reprint original link Address: http://blog.netsh.org/posts/css-transition-animate-tutorial_522.netsh.html

Browser Support Scenarios

CSS transition is widely supported by browsers.

Chrome (-webkit-transition) firefox3.7+ (-moz-transition) Safari 3.1+ (-webkit-transition) Opera 10.5+ (-o-transition )

From:axiu.me

But after my observation, now IE still can't support, even in IE9. But it doesn't matter, at least not having a bad result.

The origin of CSS transformations

CSS transition used to be something that belonged only to Apple Safari WebKit, only animated by the Safari UI.

But there are some people who think the transformation animation is the script to do things rather than CSS, but last March, from Apple, Mozilla began to add CSS transform module to the CSS 3 features, very close to the original safari WebKit effect. From this, CSS Transition is obtained.

Writing Methods

In CSS code, to use the Transition property requires this writing:

-moz-transition://firefox-webkit-transition://Safari, Chrome-o-transition://Operatransition://Official Standard

It is recommended to write all the above in writing.

effect: Color transform

Using transition, you can transform colors, such as a chain of mouse moves to create a color gradient animation:

Link

The core code is as follows:

a:hover {color:red; Background-color:rgb (255,204,255);-webkit-transition:color. 5s linear, Background-color. 5s Linea R;  Transition:color. 5s linear, Background-color. 5s linear; }

effect: Stretch, Telescopic effect

• About Us

The core code is as follows:

#example2 {height:200px;} #example2 a:link {color:blue;text-decoration:none;-webkit-transition:color. 25s ease-in 0s;transition:color. 25s Ease -out 0s; } #example2 a:hover {color:red;-webkit-transition:color. 25s ease-in. 1s;transition:color. 25s ease-out. 1s;} #example2 a:active {color:green;transition:color. 25s ease;} #example2 ul {list-style:none;margin:0;padding:0;} #example2. Menu {display:block;position:relative;top:. 9em;left:0;padding:10px;height:auto;width:100px;border:8px Solid Rgba (204,204,204,.5); Cursor:pointer;background-color:rgba (255,255,255,.75);-webkit-border-radius:5px;- moz-border-radius:5px;border-radius:5px;} #example2 ul.menu li {font-weight:normal;list-style:none;margin:0} #example2 ul.menu li a:link {font-weight:normal;lis t-style:none;font-size:12px;margin-left:0;padding-left:0;} #example2 Ul.menu ul li {font-weight:normal;padding:5px 0;margin:0;border-top:1px solid rgb (204,204,204); Background-color:rgb (255,255,255);-webkit-transiTion:background-color. 5s ease; Transition:background-color. 2s ease; } #example2. Drop {display:block;position:relative;height:0;overflow:hidden;width:100px;opacity:0;- webkit-transition:opacity. 25s linear 0s, height. 25s ease-out. 1s;transition:opacity. 25s linear 0s, height. 25s ease-o  UT. 1s; } #example2 Ul.menu ul li:hover {Background-color:rgb (234,234,234);-webkit-transition:background-color. 5s ease; Transition:background-color. 2s ease; } #example2 ul.menu:hover. Drop {height:140px;opacity:1;-webkit-transition:opacity. 25s linear 0s, height. 25s linear 0 s;transition:opacity. 25s linear 0s, height. 25s linear 0s; }

effect: Position movement

As you can imagine, if you use the Transition property when the change occurs between locations, you can animate the transition motion, which is very much like what the script does.

Position move

Press and hold the mouse

The core code is as follows:

#example3 {background-color:black;color:white;} #example3. Control {text-align:center; font-size:3em;} #example3. Move {cursor:pointer;} #example3 .move> #astro {position:relative;top:0;left:250px;-webkit-transition:top 2s ease-in-out, left 2s ease;tra Nsition:top 2s  ease-in-out, left 2s ease;} #example3 .move:active> #astro {top:10px;left:10px;-webkit-transition:top 2s ease-in-out, left 2s ease;transition:t Op 2s  ease-in-out, left 2s ease;}

Supplementadd multiple transformations at the same time

If you want your element to have a gradient in its color and background, for example:

a:hover {  color:red;  Background-color:pink;  -webkit-transition:color. 25s linear;  Transition:color. 25s linear;  -webkit-transition:background-color. 15s linear. 1;  Transition:background-color. 15s linear. 1;}

This does not achieve the goal, and the latter will overwrite the previous one, so the method uses a comma to simultaneously use a variety of transform effects:

a:hover {  color:red;  Background-color:pink;   -webkit-transition:color. 25s linear, Background-color. 15s linear. 1s;  Transition:color. 25s linear, Background-color. 15s linear. 1s; }

transform timings and delays

If you want to customize your transformation, such as the rate at which you want to customize the animation, the CSS provides the following keywords to add to the end of the post:

Name	How it works
Cubic-bezier (x1, y1, x2, y2)	The X and Y values are between 0 and 1 to define the shape of the Bezier curve for time function.
Linear	Average Speed
Ease	Gradually slow down
Ease-in	Acceleration (fade in)
Ease-out	Deceleration (fade out)
Ease-in-out	Speed up and slow down.

Appendix: Properties of transformations that can occur

What about those attributes that can be transformed? Almost all but Box-shadow, the other can change.

CSS Properties	Change the object
Background-color	Color
Background-image	Just gradients.
Background-position	Percent, length
Border-bottom-color	Color
Border-bottom-width	Length
Border-color	Color
Border-left-color	Color
Border-left-width	Length
Border-right-color	Color
Border-right-width	Length
Border-spacing	Length
Border-top-color	Color
Border-top-width	Length
Border-width	Length
Bottom	Percent, length
Color	Color
Crop	Percentage
Font-size	Percent, length
Font-weight	Digital
grid-*	Number
Height	Percent, length
Left	Percent, length
Letter-spacing	Length
Line-height	Percent, length, number
Margin-bottom	Length
Margin-left	Length
Margin-right	Length
Margin-top	Length
Max-height	Percent, length
Max-width	Percent, length
Min-height	Percent, length
Min-width	Percent, length
Opacity	Digital
Outline-color	Color
Outline-offset	Integer
Outline-width	Length
Padding-bottom	Length
Padding-left	Length
Padding-right	Length
Padding-top	Length
Right	Percent, length
Text-indent	Percent, length
Text-shadow	Shadow
Top	Percent, length
Vertical-align	Percent, length, keywords
Visibility	Visibility of
Width	Percent, length
Word-spacing	Percent, length
Z-index	Positive integers
Zoom	Digital

Thanks for watching.

CSS Transition (Transform animation)