Section 10: CSS3 advanced applications

Session 8: CSS3 advanced application

2.8.1 transition

The transition properties provided by CSS3 can add effects when elements change from one style to another without using Flash animation or JavaScript script, such as fade, fade, animation speed, etc


Transition property property

The name of the CSS attribute used to specify the transition effect. It usually occurs when the user moves the pointer to the element. The transition effect starts when the specified CSS attribute changes

Attribute value explain
none No attributes will get a transition effect
all All attributes will get a transition effect
property Defines the name of the CSS attribute to which the transition effect is applied. Multiple names are separated by commas
Syntax format:
transition-property: none | all | property;
<head>
    <style type="text/css">
        /* Set the width and height of div and make the font thicker */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            background-color: blue;
            -webkit-transition-property: background-color;		/* Safari,Chrome Browser compatibility code (- webkit -) */
            -moz-transition-property: background-color;			/* Firefox Browser compatibility code (-moz-) */
            -o-transition-property: background-color;			/* Opera Browser compatibility code (-o-) */
        }
    </style>
</head>
<body>
    <div> use transition-property Property to change the background color of the element </div>
</body>

Transition duration property

Defines the time spent by the transition effect. The default value is 0. The common units are seconds (s) or milliseconds (ms)

Syntax format:
transition-duration: time;
<head>
    <style type="text/css">
        /* Set the width and height of div and make the font thicker */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* Change element background color */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* Specifies the time taken for the transition effect */
            -webkit-transition-duration: 5s;		/* Safari,Chrome Browser compatibility code (- webkit -) */
            -moz-transition-duration: 5s;			/* Firefox Browser compatibility code (-moz-) */
            -o-transition-duration: 5s;			/* Opera Browser compatibility code (-o-) */
        }
    </style>
</head>
<body>
    <div> use transition-duration Property defines the time when the transition effect is paid </div>
</body>

Transition timing function property

Specifies the speed curve of the transition effect. The default value is "ease"

Attribute value explain
linear Specifies the transition effect from beginning to end at the same speed, which is equivalent to: cubic Bezier (0,0,0,1)
ease Specifies the transition effect of starting slowly, then accelerating, and finally ending slowly, which is equivalent to: cubic Bezier: (0,25,0.1,0,35,1)
ease-in Specifies the transition effect that starts slowly and then gradually accelerates (fade effect), which is equivalent to: cubic Bezier (0,0,0.58,1)
ease-out Specifies the transition effect that ends slowly (fade out effect), which is equivalent to: cubic Bezier (0,42,0,0.58,1)
ease-in-out Specifies the transition effect that starts and ends slowly, which is equivalent to: cubic Bezier (0,42,0,0.58,1)
cubic-bezier(n,n,n,n) Defines the shape of Bezier curves used for acceleration or deceleration. Their values range from 0 to 1
Syntax format:
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
<head>
    <style type="text/css">
        /* Set the width and height of div and make the font thicker */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* Change element background color */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* Specifies the time taken for the transition effect */
            -webkit-transition-duration: 5s;
            -moz-transition-duration: 5s;
            -o-transition-duration: 5s;
            
            /* The animation starts and ends with the specified slow transition effect */
            -webkit-transition-timing-function: ease-in-out;	/* Safari,Chrome Browser compatibility code */
            -moz-transition-timing-function: ease-in-out;		/* Firefox Browser compatibility code */
            -o-transition-timing-function: ease-in-out;			/* Opera Browser compatibility code */
        }
    </style>
</head>
<body>
    <div> use transition-duration Attribute specifies the speed curve of the transition effect </div>
</body>

Transition delay attribute

Specifies when the transition effect starts. The default value is 0. The common units are seconds (s) or milliseconds (ms)

Property values can be positive integers, negative integers, and 0

  • When set to a negative number, the transition action will start at this time point, and the previous action will be intercepted
  • When set to a positive number, the transition action will delay triggering
Syntax format:
transition-delay: time;
<head>
    <style type="text/css">
        /* Set the width and height of div and make the font thicker */
        div { width: 400px; height: 200px; font-weight: bold; }
        
        div:hover {
            /* Change element background color */
            background-color: blue;
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -o-transition-property: background-color;
            
            /* Specifies the time taken for the transition effect */
            -webkit-transition-duration: 5s;
            -moz-transition-duration: 5s;
            -o-transition-duration: 5s;
            
            /* Specifies the transition effect at which the animation starts and ends slowly */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            
            /* Specifies an animation delay of 2 seconds to trigger */
            -webkit-transition-delay: 2s;	/* Safari,Chrome Browser compatibility code */
            -moz-transition-delay: 2s;		/* Firefox Browser compatibility code */
            -o-transition-delay: 2s;		/* Opera Browser compatibility code */
        }
    </style>
</head>
<body>
    <div> use transition-delay Property specifies the transition effect delay trigger </div>
</body>

transition attribute

Composite attribute, which is used to set four transition attributes in one attribute: transition property, transition duration, transition timing function and transition delay

Whether a single attribute or a short attribute, you can achieve multiple transition effects when using

If you set the abbreviated attribute, you can set a variety of transition effects. You need to specify all values in each transition attribute set and separate them with commas

Syntax format:
transition: property duration timing-function delay;

/* Specify the border transition time of 5s, start and end at a slow speed, and trigger with a delay of 2 seconds */
transition: border-radius 5s ease-in-out 2s;

2.8.2 deformation

In CSS3, the transform attribute can realize deformation effects, such as moving, tilting, scaling and flipping elements

Recognize the transform attribute

The default value of the transform attribute is none, which is applicable to inline elements and block elements, indicating no deformation

Transform function is used to set the deformation function, which can be a list of one or more deformation functions

Transform function explain
matrix() Defines a rectangular transformation, that is, repositioning elements based on X and Y coordinates
translate() Repositioning elements based on X and Y coordinates
scale() Scaling the element object can change the size of any element object. The values include positive, negative and decimal numbers
rotate() Rotate the element object, and the value is a degree value
skew() Tilt the element object, and the value is a degree value
Syntax format:
transform: none | transform-functions;

2D conversion

The transform attribute can realize the translation, scaling, rotation, tilt and rotation effects of the element. These deformations are based on the center point of the element

  1. translation

    Using the translate() method can redefine the coordinates of elements to achieve the translation effect. This function contains two parameters that define the X-axis and Y-axis coordinates

    When the translate() method moves an element, the base point defaults to the center point of the element, and then specifies the X and Y coordinates to move

    Syntax format:
    transform: translate(x-value, y-value);
    
    <head>
        <style type="text/css">
            /* Set the width and height of div and make the font thicker */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: translate(100px, 30px);
                -ms-transform: translate(10px, 20px);		/* IE9 Browser compatibility code */
                -webkit-transform: translate(100px, 20px);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: translate(100px, 20px);		/* Firefox Browser compatibility code */
                -o-transform: translate(100px, 20px);		/* Opera Browser compatibility code */
            }
        </style>
    </head>
    <body>
        <div> use translate() Method translation element </div>
    </body>
    

  1. zoom

    scale() is used to scale the size of the element. This function contains two parameter values, which are used to define the scaling scale of width (X axis) and height (Y axis)

    The x-axis and y-axis parameter values can be positive, negative, and decimal

    • Positive number: enlarges the element
    • Negative number: flips the element before scaling it
    • Decimals: decimals less than 1 can reduce elements
    Syntax format:
    transform: scale(x-axis, y-axis);
    
    <head>
        <style type="text/css">
            /* Sets the width and height of the div */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: scale(2,3);
                -ms-transform: scale(2,3);		/* IE9 Browser compatibility code */
                -webkit-transform: scale(2,3);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: scale(2,3);		/* Firefox Browser compatibility code */
                -o-transform: scale(2,3);		/* Opera Browser compatibility code */
            }
        </style>
    </head>
    <body>
        <div> use scale() Method to zoom in on the zoom attribute </div>
    </body>
    

  1. tilt

    The skew() method can tilt the element. This function contains two parameter values, which are used to define the tilt angle of X-axis and Y-axis coordinates respectively

    x-angle indicates tilt with respect to the x-axis and y-angle indicates tilt with respect to the Y-axis. If the second value is omitted, the default value is 0

    Syntax format:
    transform: skew(x-angle, y-angle);
    
    <head>
        <style type="text/css">
            /* Sets the width and height of the div */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: skew(20deg, 30deg);
                -ms-transform: skew(20deg, 30deg);		/* IE9 Browser compatibility code */
                -webkit-transform: skew(20deg, 30deg);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: skew(20deg, 30deg);		/* Firefox Browser compatibility code */
                -o-transform: skew(20deg, 30deg);		/* Opera Browser compatibility code */
            }
        </style>
    </head>
    <body>
        <div> use skew() Tilt </div>
    </body>
    

  1. rotate

    The rotate() method can rotate the specified element object, mainly in two-dimensional space. This method allows negative values to be passed in, and the element will rotate counterclockwise

    Syntax format:
    transform: rotate(angle);
    
    <head>
        <style type="text/css">
            /* Sets the width and height of the div */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotate(30deg);
                -ms-transform: rotate(30deg);		/* IE9 Browser compatibility code */
                -webkit-transform: rotate(30deg);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: rotate(30deg);		/* Firefox Browser compatibility code */
                -o-transform: rotate(30deg);		/* Opera Browser compatibility code */
            }
        </style>
    </head>
    <body>
        <div> use rotate() Rotate </div>
    </body>
    

  1. Change the center point of the transform

    The transform origin attribute can change the center point of the element

    If an element needs to set multiple deformation effects, you can use spaces to separate multiple deformation attribute values

    Parameter value introduction:

    • X-axis: defines where the view is placed on the x-axis. Possible values are: left, center, right, length,%
    • Y-axis: defines where the view is placed on the y-axis. Possible values are: top, center, bottom, length,%
    • Z-axis: defines where the view is placed on the z-axis. Possible values are: length
    Syntax format:
    transform-origin: x-axis y-axis z-axis;
    
    <head>
        <style type="text/css">
            /* Sets the width and height of the div */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotate(30deg);
                -ms-transform: rotate(30deg);		/* IE9 Browser compatibility code */
                -webkit-transform: rotate(30deg);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: rotate(30deg);		/* Firefox Browser compatibility code */
                -o-transform: rotate(30deg);		/* Opera Browser compatibility code */
                
                transform-origin: 20% 40%;			/* Change origin coordinate position */
            }
        </style>
    </head>
    <body>
        <div> use transform-origin Property to change the coordinate center point </div>
    </body>
    

3D conversion

  1. rotateX() method

    Specifies the rotation of the element about the X axis

    Parameter a is used to define the angle value of rotation, in deg. When the value is positive, the element rotates clockwise around the X axis, and when the value is negative, it rotates counterclockwise

    Syntax format:
    transform: rotateX(a);
    
    <head>
        <style type="text/css">
            /* Sets the width and height of the div */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);		/* IE9 Browser compatibility code */
                -webkit-transform: rotateX(30deg);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: rotateX(30deg);		/* Firefox Browser compatibility code */
                -o-transform: rotateX(30deg);		/* Opera Browser compatibility code */
            }
        </style>
    </head>
    <body>
        <div> use rotateX() Method around X Shaft rotation </div>
    </body>
    

  1. rotateY() method

    Specifies that the element rotates about the Y axis

    Parameter a is used to define the angle value of rotation, in deg. When the value is positive, the element rotates clockwise around the Y axis, and when the value is negative, it rotates counterclockwise

    Syntax format:
    transform: rotateY(a);
    
    <head>
        <style type="text/css">
            /* Sets the width and height of the div */
            div { width: 400px; height: 200px; }
            
            div {
    			transform: rotateY(30deg);
                -ms-transform: rotateY(30deg);		/* IE9 Browser compatibility code */
                -webkit-transform: rotateY(30deg);	/* Safari,Chrome Browser compatibility code */
                -moz-transform: rotateY(30deg);		/* Firefox Browser compatibility code */
                -o-transform: rotateY(30deg);		/* Opera Browser compatibility code */
            }
        </style>
    </head>
    <body>
        <div> use rotateX() Method around Y Shaft rotation </div>
    </body>
    

    rotateZ() method

    The rotateZ() function has the same functions as the rotateX() function and rotateY() function, except that the rotateZ() function is used to specify the rotation of an element around the Z axis

    From a visual point of view only, the rotateZ() function rotates the element clockwise or counterclockwise, which is equivalent to the effect of rotate(), but it is not a rotation on the 2D plane

  2. rotate3D() method

    In three-dimensional space, the rotation of the axis is around a [x,y,z] vector and passes through the element origin

    Attribute value:

    • x: Represents the length of the lateral coordinate displacement vector
    • y: Represents the length of the longitudinal coordinate displacement vector
    • Z: Represents the length of the Z-axis displacement vector
    • Angle: angle value, which is mainly used to specify the rotation angle of elements in 3D space. When the value is positive, it rotates clockwise, and when it is negative, it rotates counterclockwise

Other conversion attributes and methods

Conversion properties explain
transform Apply 2D or 3D transformations to elements
transform-origin Allows you to change the position of the converted element
transform-style Specifies how nested elements are displayed in 3D space
perspective Specifies the perspective effect of 3D elements
perspective-origin Specifies the bottom position of the 3D element
backface-visibility Defines whether an element is visible when it is not facing the screen
Conversion method explain
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Define a 4 * 4 matrix that does not use 16 values for 3D conversion
translate3d(x,y,z) Define 3D conversion
translateX(x) Define the 3D conversion, using only the values for the X axis
translateY(y) Define the 3D conversion, using only the values for the Y axis
translateZ(z) Defines the 3D conversion, using only the values for the Z axis
scale3d(x,y,z) Define 3D scale conversion
scaleX3d(x) Define 3D scaling conversion by giving a value of X axis
scaleY3d(y) Define 3D scaling conversion by giving a value of Y axis
scaleZ3d(z) Define 3D scaling conversion by giving a value of Z axis
rotate3d(x,y,z) Define 3D rotation
rotateX(x) Defines the 3D rotation of the X axis
rotateY(y) Defines the 3D rotation of the Y axis
rotateX(z) Defines the 3D rotation of the Z axis
perspective(n) Defines the transparent view of the 3D transformation element

2.8.3 animation

@keyframes

Before using animation, you must define key frames. A key frame represents a state in the animation process

@Keyframes rules are used to create animation. Specifying a CSS style in @ keyframes can create animation effects that gradually change from the current style to a new style

Attribute value:

  • animationname: indicates the name of the current animation, which will be used as the unique identification when referencing, so it cannot be empty
  • Keyframes selector: key frame selector, which specifies the position of the current key frame to be applied in the whole animation process. The value can be a percentage, from or to
    • Where, the effect of from and 0% are the same, indicating the beginning of the animation, and the effect of to and 100% are the same, indicating the end of the animation
  • CSS Style: defines the corresponding animation state when executing to the current key frame. It is defined by CSS style and cannot be empty
Syntax format:
@keyframes 'animationname' {
    keyframes-selector{css-styles;}
}


/* The animation starts completely transparent and ends completely opaque */

@keyframes 'appear' {
    /* Method 1: */
    0% { opacity: 0;}
    100% { opacity: 1;}
    
    /* Method 2: */
    from { opacity: 0;}
    to { opacity: 1;}
    
    /* Method 3: achieve fade in and fade out effect*/
    from,to {opacity: 0;}		/* The start and end state of the animation is: fully transparent */
    20%,80% { opacity: 1;}		/* The middle state of the animation is: completely opaque */
}

Animation name attribute

The animation name attribute is used to define the name of the animation and specify the name for the @ keyframes animation. The initial value is none, which applies to all block elements and inline elements

The animationname parameter is used to specify the name of the keyframe that needs to be bound to the selector. If the value is none, it means that no animation will be applied. It is usually used to overwrite or cancel the animation

Syntax format:
animation-name: keyframename | none;

div {
    animation-name: header;		/* Bind animation name */
}

@keyframes header {				/* Define animation effects */
    from { opacity: 0;}
    to { opacity: 1;}
}

Animation duration property

Animation duration is used to define the time required to complete the animation. It is calculated in seconds (s) or milliseconds (ms). The default value is 0

Syntax format:
animation-duration: time;


div {
    animation-name: header;
    animation-duration: 2s;		/* Animation duration */
}

@keyframes header {
    from { opacity: 0;}
    to { opacity: 1;}
}

Animation timing function property

Animation timing function is used to specify the speed curve of animation. You can define which method to use to perform animation effects. The default value is ease, which is applicable to all block elements and inline elements

Attribute value explain
linear The speed of the animation is the same from beginning to end
ease Default. The animation starts slowly, speeds up gradually, and then ends slowly
ease-in Animation starts slowly
ease-out Slow end of animation
ease-in-out Oh, the animation starts and ends slowly
cubic-bezier(n,n,n,n) Enter your own value in the cubic Bezier function. Possible values are values from 0 to 1
Syntax format:
animation-timing-function: value;


div {
    animation-timing-function: ease-in;
}

Animation delay property

The animation delay attribute is used to define the time delay before the animation effect is executed, that is, when the animation starts

Syntax format:
animation-delay: time;


div {
    animation-delay: 2s;		/* The animation starts after a delay of 2s */
}

Animation iteration count property

The animation iteration count property defines the number of times the animation is played. The initial value is 1, which applies to all block elements and inline elements

  • If the attribute value is number, which is used to define the number of times the animation is played
  • If the attribute value is infinite, the animation loop is specified
Syntax format:
animation-iteration-count: number | infinite;


animation-iteration-count: 2;			/* Define the animation to play twice */
-webkit-animation-iteration-count: 2;	/* Safari And Chrome browser compatible code */

Animation direction property

The animation direction property defines the direction of the current animation playback, that is, whether to reverse the alternating cycle after the animation playback. Applies to all block elements and inline elements

This attribute has two values. The default value is normal, which means that the animation will be displayed normally every time. If the attribute value is alternate, the animation plays normally at odd times and backwards at even times

Syntax format:
animation-direction: normal | alternate;


div {
    animation-direction: alternate;				/* The animation will play normally in odd number of times and reversely in even number of times */
    -webkit-animation-direction: alternate;		/* Safari And Chrome browser compatible code */
}

animation attribute

Like the transition attribute, the animation attribute is also a shorthand attribute, which is used to set six animation attributes: animation name, animation duration, animation timing function, animation delay, animation iteration count and animation direction in an attribute value

When using the animation attribute, you must specify the animation name and animation direction attributes, otherwise the duration is 0 and the animation will never play

Syntax format:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;


/* Necessary attributes */
animation: mymove alternate;

animation: mymove 5s linear 2s 3 normal;		/* mymove Animation, 5 seconds long, average speed playback, 2 seconds delay playback, 3 times playback, normal display */

Tags: Front-end css3 css

Posted by maGGot_H on Tue, 24 May 2022 23:31:32 +0300