"CSS" transitions, animations, and transformations

"CSS" transitions, animations, and transformations

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.

    
 
      Example            
            Banana alone.            By the time we add the countless types of apples, oranges, and other well-know fruit, we is faced with thousands of choic Es.        

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 
 
   
  
    
   
     
    
     
   
    
  
   
 
  

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     

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.

    
 
      Example    

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:

2.1 Using KeyFrames

CSS animation key frame machine flexible, very worthy of study.

(1) Setting the initial state

In the previous example, the initial value of the property to be processed for animation comes from the element itself. You can use the FROM clause to specify a different set of values. Modify the CSS file for the previous 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 delay is modified to 1000ms, and the initial value is provided for the background color, width, height, rounded border property, and the other properties specified in the to sentence start at the beginning of the animation from the element itself. It can be seen from the results shown below. The first is a green circle, then a second after a straight black oval, and then after two seconds to gradually change into a yellow square.

(2) Specify intermediate keyframes

You can also add other keyframes to define the intermediate stages of the animation. This is achieved by adding a percent clause, which modifies the preceding example CSS code 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 percent clause, a point is defined in the animation, and the attributes and values specified in the clause are applied entirely to the style. In this example, the 50% and 75 clauses are defined.

There are two uses for medium keyframes. The first is to define a new rate of change for the property. The browser uses the speed function specified by the Animation-timing-function property to calculate the intermediate values that are required to move a keyframe to the next keyframe to ensure smooth playback between keyframes and keyframes. The second is to define the attribute values to create more complex animations. You can see that this example shows the following effect:

2.2 Setting the repeat direction

After the animation is over, the browser can choose how the next animation repeats. Use the Animation-direction property to specify the first way.

Modify the preceding example CSS code 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 Understanding End State

One limitation of CSS animations is that the values defined for the keyframes are applied only in the animation. After the animation finishes, the animation element's appearance returns to its original state.

2.4 Applying animations when initial layout

One of the advantages of animations over transitions is that they can be applied to the initial layout of the page. When the value of the Animation-delay property is set to 0 (the default), the style is automatically applied when the page is loaded, which means the browser will animate once the HTML is displayed.

PS: Use the appeal method with caution. If you want to use animations in a page, and the animation doesn't invite users to just one action, this should be more of a caution. If you really want to use animations, make sure that the animation works more effectively, and don't prevent users from reading or interacting with other parts of the page.

2.5 Reuse KeyFrames

We can apply multiple animations to the same set of keyframes, thus animating the properties to configure different values.

    
 
  
     <title>Example</title>    

The code shows two styles, all of which use Growquare keyframes. As follows:

2.6 Applying multiple animations to multiple elements

One variant of the previous example is to apply the same animation for multiple elements. In a style that contains animation details, you can do this by extending the scope of the selector.

(1) Apply an animation to multiple elements

    
 
      Example    

(2) Apply multiple keyframes for one element

    
 
      Example    

2.7 Stop and start animations

The Aniamation-play-state property can be used to stop and start the animation. If the value of this property is paused, the animation stops. If you switch to playing. The animation will start playing.

    
 
      Example    
    Running    Paused

3. Using transformations

We can use CSS transformations to apply a linear transformation to an element, which means that an element can be rotated, scaled, tilted, and panned.

3.1 Applying transformations

The following code is an example of a transformation.

    
 
      Example    

In this example, a transform property declaration has been added for the #banana2 selector, and two transformations have been specified. The first is the rotation of the -45° (i.e. counterclockwise rotation of 45°), and the second is a scaling of factor 1.2 along the x-axis. The effects of these transformations are as follows:

3.2 Specifying the starting point of the element transformation

The Transform-origin property allows us to specify the starting point for applying transformations. By default, the center of the element is used as a starting point, but you can use the values in the following table to select a different starting point.

To define a starting point, you need to define a value for each x-axis and y-axis. If only one value is supplied, the other value is considered to be a central location. The following code shows the use of the Transform-origin property.

    
 
      Example    

In this example, the starting point of the transformation has reached the upper-right corner of the element, as shown in the following display:

3.3 Transform as animation and transition processing

We can apply animations and transitions for transformations just like other CSS properties.

    
 
      Example    

In this example, a transition is defined, which completes a 360° rotation transformation after 5 seconds. When the user hovers over the #banana2 element, the transition is applied, as shown in the effect:

