Early in the web to achieve animation effect, are dependent on JavaScript or flash to complete. However, a new module transition has been added to the CSS3, which can be used to trigger the appearance change of elements through some simple CSS events, making the effect appear more delicate. Simply put, it is triggered by clicking on the mouse, getting focus, being clicked or any changes to the element, and smoothing the CSS's property values with an animated effect.
Creating a simple transition in CSS can be accomplished in the following steps: First, declare the initial state style of the element in the default style, and second, declare the final state style of the transition element, such as the levitation state, and thirdly, add some different styles by adding a transition function in the default style.
CSS3 's over-transition property is a composite property that mainly includes the following sub-properties:
Transition-property: Specifying CSS properties for staging or dynamic impersonation
Transition-duration: Specify the time required to complete the transition
Transition-timing-function: Specifying a transition function
Transition-delay: Specify the delay time to start appearing
First look at the Transition-property property
The transition-property is used to specify the CSS property name of the transition animation , which only has a property with a midpoint value (the property that needs to animate) to have a transition effect. The corresponding CSS properties that have transitions include:
Html:
< Div ></ Div >
Css:
{ width: 200px; height: 200px; background-color:red; margin: 20px auto; -webkit-transition: background-color. 5s ease. 1s; transition: background-color. 5s ease. 1s; { background-color: orange;}Demo Result:
Mouse Move in
Mouse move out
Special Note : When the "Transition-property" property is set to all, the attribute for all midpoint values is represented.
Use a simple example to illustrate the problem:
Suppose your initial state sets the style "width", "height", "background", and when you change these three properties in the final state, then all represents " width", "height" and "background". If your final state changes only "width" and "height", then all stands for " width" and "height".
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"><title>Morphing and animation</title><Linkhref= "Style.css"rel= "stylesheet"type= "Text/css"></Head> <Body><Div></Div></Body></HTML>
Div{width:200px;Height:200px;background:Red;margin:20px Auto;-webkit-transition-property:width;-webkit-transition-property:background;Transition-property:background;Transition-property:width;-webkit-transition-duration:1s;transition-duration:1s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-delay:1s;Transition-delay:1s;}Div:hover{width:400px;background:Yellow;}
Animation--Transition Properties Transition-property
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
