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
-
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>
-
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>
-
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>
-
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>
-
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
-
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>
-
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
-
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 */