CSS Transition (Transform animation)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.