Home > Developer > Web Develop
1, browser support situation
Transform
Transition
Animation
2. Describe their usage separately.
The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements, which can change the shape of an element.
CSS3 Transform properties on W3cschoolSyntax for transform:none| transform-functions;
For specific methods see
The Transition property is a shorthand property for setting four transition properties:
Here's a simple way to actually use these two properties to do an over-animation:
Example 1: What we use most often is when the mouse slides over the element, letting the elements change. We will set the state of the div when initializing, and then set the state of the Div:hover (the change of state can be a normal property, similar to the width,height, but what is said today is transform, so specifically deformed), between these two states, We want to use over-animation to show them an animated effect. So how to use over-attribute transition? At first, I will give this attribute to Div:hover, so set to get a very strange effect, that is, when the mouse is put up, you can follow the set of transition method to excessive, but when the mouse moved away, it is directly back to the initialization state, the middle does not Excessive. Why is that so? First analysis of the next selector, Div and div:hover are also selected div elements, but div:hover just select a div in a state. Then, the transform attribute in Div:hover will be added to the DIV element when the mouse is over the DIV element, when the state of the DIV element changes, it will be set in transition. When the mouse moves out of the DIV element, in addition to the state set to the time of initialization, will also remove the effect set in transition, resulting in the move out of the animation is not over-effects.
Example 2: Similarly, if you are using JavaScript for event binding, adding a change-state class when the mouse is over the element is also a way to set the transition in the initialization state of the element. Before or after changing the state of the effects.
It is not difficult to see from the above examples that changes in the state of the elements, such as width,height,transform ... is actually the first and last frame of the over animation. By setting the Transition property on the element, you set the excess between the two frames.
Attach the most basic animation code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Body{position:relative;}. Donghua{transition:All . 3s linear;width:200px;Background-color:#555;Color:#fff;Height:100px;position:Absolute;Top:88px; Left:123px;}. Donghua:hover{width:300px;Transform:Scale (1.2,1.3);} </style></Head><Body> <Divclass= "Donghua">CSS3 Animated Demo</Div></Body></HTML>
Moving the mouse in and out of the div will see animations with transitions.
"This article · Finish
CSS3 Animation: Transition and animation (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
