Home > Developer > JavaScript
[CSS] transition, animation and transformation, css transition Transformation
1. Use transition
The transition effect is generally achieved by the browser directly changing the CSS attribute of the element. For example, if you use the hover selector, once you hover your mouse over the element, the browser will apply the attributes associated with the selector.
<!DOCTYPE html> #banana { font-size: large; border: medium solid green;} #banana:hover { font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;} </style><span id="banana">banana</span> alone. By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices. </p></div></body>
When you hover your mouse over the span element, the browser will respond and apply the new attributes directly. Shows the changes:
The CCS transition attribute allows you to control the speed of the new attribute values of an application. For example, you can gradually change the appearance of the span element in the example to make the mouse move to the word banana more harmonious.
The transition-delay and transition-duration attributes are specified as CSS time, which is a number in milliseconds or seconds ).
The format of the short transition attribute is as follows:
transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
Modify the CSS code in the preceding example as follows:
p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}#banana { font-size: large; border: medium solid green;}#banana:hover { font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px; transition-delay: 100ms; transition-property: background-color,color,padding,font-size,border; transition-duration: 500ms;}
In this example, a transition is added for the style, which is applied through the # banana: hover selector. The transition starts after you hover your mouse over the span element for 500 ms and lasts for ms. The transition applies to the background-color, color, padding, font-size, and border attributes. The following shows the gradual transition process:
Note that multiple attributes are specified in this example. The values of the Transition attribute are separated by commas (,), so that the transition effect will appear at the same time. You can specify multiple values for the latency and duration, which means that different attributes start to transition at different time points and the duration is also different.
1.1 create reverse transition
The transition takes effect only when the style associated with the application is used. The hover selector is used in the sample style, which means that the style is applied only when you hover the mouse over the span element. Once you move the mouse over the span element, only the # banana style is left. By default, the appearance of the element immediately returns to the initial state.
For this reason, most transitions occur in pairs: the transition of the temporary state and the reverse transition in the opposite direction. Modify the CCS code in the preceding example to show how to smoothly return the initial style by applying another transition style.
p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}#banana { font-size: large; border: medium solid green; transition-delay: 100ms; transition-duration: 500ms;}#banana:hover { font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px; transition-delay: 100ms; transition-property: background-color,color,padding,font-size,border; transition-duration: 500ms;}
1.2 select the calculation method of the median
When using transition, the browser needs to calculate the intermediate value between the initial value and the final value for each attribute. The transition-timing-function attribute is used to specify the method for calculating the median value, which is the cubic besell curve controlled by four points. There are five preset curves to choose from, represented by the following values:
* Renewal (default)
* Linear
* Callback-in
* Timed-out
* Callback-in-out
The five curves show the rate at which the intermediate value changes to the final value over time.
The simplest way to figure out these values is to experiment in your own HTML document. There is another value, cubic-bezr, which can be used to specify a custom curve.
The following figure shows how to modify the CSS style of the preceding example to demonstrate the application of the transition-timing-function attribute:
p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}#banana { font-size: large; border: medium solid green; transition-delay: 10ms; transition-duration: 250ms;;}#banana:hover { font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px; transition-delay: 100ms; transition-property: background-color,color,padding,font-size,border; transition-duration: 500ms; transition-timing-function: linear;}
2. Use animations
CSS animation is essentially an enhanced transition. In the process of transition from one style to another, more choices, more control, and more flexibility are provided.
The format of the short attribute of animation is as follows:
animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>
Note that none of these attributes are used to specify the CSS attributes to be used as animations. This is because the animation is defined in two parts. The first part is included in the style declaration and uses the attributes listed in the preceding table. They define animation styles, but do not define which attributes are animations. The second part uses the @ key-frames rule window to define the animation attributes. The following code shows the two parts of the animation definition.
<!DOCTYPE html> -webkit-animation-delay: 100ms; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare'; } @-webkit-keyframes GrowQuare { to { background-color: yellow; border-radius: 0; } } </style>
To understand what has been done in this example, you should carefully study the two parts of the animation. The first part defines the animation attributes in the style, which is the same as the # ball selector. First, let's take a look at the basic attributes: the selector style starts playing the animation attributes after 2000 ms is applied. The duration is ms, and there is no limit for repeated playback. The median value is calculated using the linear function. In addition to repeated animation playback, these attributes have corresponding attributes in the transition.
These basic attributes do not indicate which CSS attributes apply animations. Therefore, you need to use the animation-name attribute to name the animation property. The name is GrowsQuare. In this way, it is equivalent to telling the browser to find a set of key frames named GrowQuare, and then apply the values of these basic attributes to the animation attributes specified by @ keyframes. In this example, the key frame Declaration (the-webkit prefix is omitted) is as follows ):
@-webkit-keyframes GrowQuare { to { background-color: yellow; border-radius: 0; } }
The Declaration starts with @ keyframes, and then the Group Key Frame name GrowQuare is specified. The Declaration internally specifies a set of animation effects to be applied. The to Declaration defines a set of animation style attributes and defines the final values of these attributes at the end of the animation. The initial value of an animation comes from the attribute value of the animation processing element before applying the style.
In this example, the result is a circle with a size of 180 pixels, gradually becoming a square. Shows the display effect:
2.1 use key frames
The key frames of CSS animation are flexible and worthy of research.
(1) set the initial status
In the previous example, the initial value of the property to be processed as an animation comes from the element itself. You can use the from clause to specify another set of values. Modify the CSS file in the preceding example as follows:
#ball{ width: 180px; height: 180px; background-color:green; margin:20px auto;border-radius: 90px; -webkit-animation-delay: 1000ms; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare';}@-webkit-keyframes GrowQuare { from { background-color: black; width: 90px; height: 180px; border-radius: 45px/90px; } to { background-color: yellow; border-radius: 0; }}
In this example, the animation latency is modified to 1000 ms, and the initial value is provided for the background color, width, height, and rounded border attributes, the initial values of other attributes specified in the to sentence at the beginning of the animation come from the element itself. The following figure shows the effect. It starts with a green circle, and then becomes a black elliptic after one second, and gradually changes to a yellow square after two seconds.
(2) Specify the intermediate Key Frame
You can also add other key frames to define the intermediate stage of the animation. This is implemented by adding a percentage clause. The preceding sample CSS code is modified as follows:
#ball{ width: 200px; height: 200px; background-color:green; margin:20px auto;border-radius: 100px; -webkit-animation-delay: 1000ms; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare';}@-webkit-keyframes GrowQuare { from { background-color: black; width: 100px; height: 200px; border-radius: 50px/100px; } 50% { background-color: red; width: 50px;height: 100px; border-radius: 25px/50px;margin:70px auto; } 75%{ background: blue; width: 25px;height: 50px; border-radius: 12.5px/25px;margin:95px auto; } to { background-color: yellow; border-radius: 0; }}
For each percentage clause, a vertex is defined in the animation, and the attribute and value specified in the clause are fully applied to the style. In this example, clauses 50% and 75 are defined.
The key frame has two purposes. First, define a new change rate for the attribute. The browser uses the speed control function specified by the animation-timing-function attribute to calculate the median value required to move a key frame to the next key frame to ensure smooth playback between the key frame and the key frame. Second, define property values to create more complex animations. The following figure shows the effect of this example:
2.2 set repetition direction
After the animation ends, the browser can choose how to repeat the animation. Use the animation-direction attribute to specify the first method.
The preceding sample CSS code is modified as follows:
#ball{ width: 50px; height: 50px; background-color:green;;border-radius: 25px; -webkit-animation-delay: 100ms; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 2; -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare'; -webkit-animation-direction: alternate;}@-webkit-keyframes GrowQuare { 50%{ margin-top: 200px; } to { margin-left:200px; }}
2.3 understand the end status
One limitation of CSS animation is that the attribute-defined value of the key frame can only be applied in the animation. After the animation ends, the appearance of the animation element returns to the initial state.
(To be continued)
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
