On CSS transition, animation and transformation methods

1. Using Transitions

The transition effect is typically implemented by a browser that directly changes the element's CSS properties. For example, if you use the: hover selector, once the user hovers over the element, the browser applies the properties associated with the selector.

When the user hovers over the span element, the browser responds and applies the new properties directly. The changes are as follows:

The CCS Transition property allows you to control the speed at which new property values are applied. For example, you can choose to gradually change the appearance of the span element in the example, so that the effect of moving the mouse over the word banana is more harmonious.

The Transition-delay and Transition-duration properties are specified as CSS time, which is a number in MS (milliseconds) or s (seconds).

The format of the transition shorthand property is as follows:

Transition: <transition-property> <transition-duration> <transition-timing-function> < Transition-delay>

Modify the CSS code for the previous 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 to the style, which is applied through the #banana:hover selector. The transition begins after the user hovers over the span element 100ms, with a duration of 500ms, and transitions to the background-color, color, padding, font-size, and Border properties. The following shows the gradual process of this transition:

Notice how multiple properties are specified in this example. The values of the transition properties are separated by commas so that the transition effect occurs at the same time. You can specify multiple values for the delay time and duration, which means that different properties begin the transition at different points in time and have a different duration.

1.1 Creating a reverse transition

Transitions take effect only when the style they are associated with is applied. The example style is used with the: hover selector, which means that the style is applied only if the user hovers over the SPAN element. Once the user has left the mouse on the span element, leaving only the #banana style, the element's appearance is immediately returned to its original state by default.

For this reason, most transitions come in pairs: a transient transition and a reverse transition in the opposite direction. Modify the CCS code of the previous example to show how to return the initial style smoothly by applying a different 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 Choosing how to calculate the median value

When using transitions, the browser needs to calculate the intermediate values between the initial and final values for each property. Use the Transition-timing-function property to specify how intermediate values are computed, representing three Bezier curves controlled by four points. There are five preset curves that can be selected, represented by the following values:

* Ease (default value)

* Linear

* ease-in

* Ease-out

* Ease-in-out

You can see these five curves, which show the rate at which the median value becomes the final value over time.

The simplest way to figure out these values is to experiment with your own HTML document. There is another value, cubic-bezier, that can be used to specify a custom curve.

Modify the CSS style of the previous example as follows to show the application of the Transition-timing-function property:

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. Using animations

CSS animation is essentially an enhanced transition. In the process of transitioning from one style to another, you have more choices, more control, and more flexibility.

The format of the animation shorthand property is as follows:

Animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay > <animation-iteration-count>

Note that these properties are not used to specify the CSS properties to be animated. This is because the animation is defined in two parts. The first part is included in the style declaration, using the attributes listed in the table above. They define the style of the animation, but do not define which properties are animated. The second section uses the @key-frames Rules window to define the properties that define the animation. You can see these two parts of the definition animation from the following code.

<! DOCTYPE html>

To understand what has been done in this example, you should look at the two parts of the animation. The first part is to define the animation properties in the style, along with the #ball selector. First look at the basic properties: Selector style after applying 100ms to play animation properties, duration 2000ms, infinite repetition, median value using linear function calculation. In addition to repeating animations, these properties have corresponding properties in the transition.

These basic properties do not indicate which CSS properties to apply the animation to. To do this, use the Animation-name property to give the animated property a name, called Growsquare. This is equivalent to telling the browser to find a set of keyframes named Growquare, and then applying the values of these basic properties to the animated properties specified @keyframes. Here is the declaration of the keyframe in this example code (the-webkit prefix is omitted here):

@-webkit-keyframes Growquare {to        {            background-color:yellow;            border-radius:0;        }    }

The start of the declaration is @keyframes, followed by the name Growquare of the set of keyframes. The declaration internally specifies a set of animation effects to be applied. The to declaration defines a set of properties that animate styles, and also defines the final values of those properties at the end of the animation. The initial value of the animation comes from the property value of the animated element before the style is applied.

The effect of this example is a circle with a size of 180 pixels, which gradually becomes a square. The display effect is as follows:


This article on the CSS transition, animation and transformation is a small part of the whole content to share to everyone, I hope we can give you a reference, but also hope that we support a lot of topic.alibabacloud.com.