CSS Summary Notes: Examples of Transformations, Transitions, and Animations
|
1. Transition Transition property usage: transition :transition-property transition-duration transition-timing-function transition-delay Can be specified together or separately transition-property: is the property to be transitioned (such as width, height), all means all are changed. transition-duration: the time taken, in seconds or milliseconds transition-timing-function: specifies the animation type (motion curve). There are several types of motion curves: ease=>slow down gradually (default value) linear=>constant speed ease-in=>accelerate ease-out=>decelerate ease-in-out=>accelerate first and then decelerate transition-delay delay time, in s or ms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 200px;
background-color: aqua;
transition: width 2s ease-in-out 0.5s;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>The result is as follows. When the mouse is moved up, the change is no longer instantaneous, but is completed transitionally.
2. Transform (1) 2D deformation (a) Move translate(x,y) The movement can be specified in pixels or percentages. Note: the specified percentage is a percentage of the box's own size, so it can be used to set the center alignment when positioning the box (set left: 50% and then move it -50% of the box itself).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
}
div:active {
transform: translate(200px, 200px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
After clicking, the box moves. The code for centering the positioned box is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 300px;
height: 300px;
background-color: aqua;
transition: all 0.5s;
position: relative;
}
.son {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>The result is
(b) Scaling scale(x, y) If x,y is set to be greater than 1, it is zoomed in; if it is less than 1, it is zoomed out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
}
div:hover {
transform: scale(0.5, 2);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
(c) rotate(x deg) x specifies the degree value, positive values are clockwise and negative values are counterclockwise. For rotation, you can use transform-origin to specify the rotation center point. You can also specify specific pixel values for left top right bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
div:hover {
transform: rotate(120deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(d) Skew (x deg, y deg) x,y specify the tilt angle in the x and y directions respectively, which can be negative. If the y value is not specified, the default value is 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid red;
transition: all 1s;
margin: 200px auto;
}
div:hover {
transform: skew(30deg, 20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(2) 3D deformation (a) Rotation (rotateX, rotateY, rotateZ) 3D rotation is similar to 2D, except that one is based on two-dimensional coordinates and the other is based on three-dimensional coordinates. The three values can be specified together or individually.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
div:hover {
transform: rotateX(120deg);
/* transform: rotateY(120deg); */
/* transform: rotateZ(120deg); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(b) Move (translateX, translateY, translateZ) 3D movement is identical to 2D movement for movement in the xy direction. Only the movement in the z direction is different. Movement in the Z direction means distance becomes farther and closer in real life. Therefore, the result displayed on the web page becomes larger when it is closer and smaller when it is farther away. To make the Z-axis movement effective, you must first set the perspective (the distance between the eye and the screen);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 1000px;
/* The smaller the value, the closer the eyes are*/
}
div {
width: 200px;
height: 200px;
background-color: aqua;
transition: all 0.5s;
margin: 200px auto;
}
div:hover {
transform: translate3d(0, 0, 200px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3. Animation (1), animation: animation- name || animation- duration || animation- timing-function || animation- delay || animation- iteration-count || animation- direction || animation- fill-mode; animation-name: animation name (animation defined by yourself using @keyframes) animation-duration: duration animation-timing-function: Motion curve, similar to the motion curve of transition. animation-delay: delay time animation-iteration-count: number of loops (infinite is an infinite loop) animation-direction: whether it is reverse (whether the animation starts from the end and plays backwards) animation-fill-mode: Set the state outside the animation playback (the state at the end) none | forwards (set to the state at the end) | backwards (set to the state at the beginning) | both (set to the state at the beginning or end) animation-play-state: Set the animation state running start|paused pause (2) @keyframes custom animation The format is as follows
@keyframes animation name {
from{start} 0%
to{end} 100%
}You can use from...to to specify the animation process, or you can use 0%~100% to specify the animation process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
/* animation: animation name, animation time, motion curve, when to start, playback times, whether to play in the opposite direction*/
animation: move 5s linear 3;
}
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(400px, 0, 0);
}
50% {
transform: translate3d(400px, 300px, 0);
}
75% {
transform: translate3d(0, 300px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: HTML Tutorial: Collection of commonly used HTML tags (4)
>>: MySQL password contains special characters & operation of logging in from command line
Recommend
Detailed introduction to logs in Linux system
Table of contents 1. Log related services 2. Comm...
An example of elegant writing of judgment in JavaScript
Table of contents Preface 1. Monadic Judgment 1.1...
The best way to automatically mount shared directories on Ubuntu 16.04 startup under Virtualbox
People who use virtual machines usually set up sh...
Encoding problems and solutions when mysql associates two tables
When Mysql associates two tables, an error messag...
js method to realize shopping cart calculation
This article example shares the specific code of ...
Modularity in Node.js, npm package manager explained
Table of contents The basic concept of modularity...
Various transformation effects of HTML web page switching
<META http-equiv="Page-Enter" CONTENT...
How to write HTML head in mobile device web development
Copy code The code is as follows: <head> &l...
Native JS to achieve digital table special effects
This article shares a digital clock effect implem...
Sharing of SVN service backup operation steps
SVN service backup steps 1. Prepare the source se...
mysql8.0.11 winx64 manual installation and configuration tutorial
First of all, let me talk to you about my daily l...
Detailed tutorial on downloading, installing and configuring the latest version of MySQL 8.0.21
1. Download 1. Download the installation package ...
How to use boost.python to call c++ dynamic library in linux
Preface Recently I started using robot framework ...
Mini Program natively implements left-slide drawer menu
Table of contents WXS Response Event Plan A Page ...
TCP third handshake data transmission process diagram
The process packets with the SYN flag in the RFC7...