How to use translate and transition in CSS3
|
I always feel that translate and transition are very powerful and I can never learn them. In fact, I am reluctant to understand them. I spent less than half an hour reading the documentation of the interface and got a general understanding of it. The following is an example. You can download it and run it yourself.
<!DOCTYPE html>
<html>
<head>
<title>Translate and transition</title>
</head>
<body>
<style type="text/css">
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#translate {
transition: all 2s;
-ms-transition: all 2s;
-webkit-transition: all 2s;
}
div#translate:hover{
transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);
-webkit-transform: translate(50px, 100px);
}
</style>
<div>Hello, This is a Div element</div>
<div id='translate'>Hello, This is another Div element</div>
</body>
</html>For a demo, please click here[/css3/translate.html] translate(a, b): In official terms, it is called 2D transfer, which is actually the movement of the x-axis and y-axis on the plane. The reason why we use so many terms is because we are not well educated and do not want us to understand it easily. The starting point is in the upper left corner, but if the element position is set to a non-origin point at the beginning, it is another matter, that is, calculation is done on an element basis Origin (0,0) ---------- transition animation transition
property - css property duration - animation execution duration. If it is 0, the animation will not be executed. The default timing-function animation execution mode is ease delay - animation delay execution time default is 0 These four are attributes. Don’t think I wrote other attributes. For details, please refer to the document [https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition] Summarize This is the end of this article about how to use translate and transition in CSS3. For more information about how to use CSS3 translate transition, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Dealing with the problem of notes details turning gray on web pages
>>: Attributes in vue v-for loop object
Recommend
Vue realizes screen adaptation of large screen pages
This article shares the specific code of Vue to a...
Detailed explanation of multi-version concurrency control of large objects in MySQL
MySQL 8.0: MVCC for Large Objects in InnoDB In th...
The difference between two MySQL delete user statements (delete user and drop user)
Tip: In MySQL, we often need to create and delete...
CentOS 7.x docker uses overlay2 storage method
Edit /etc/docker/daemon.json and add the followin...
How to enable TLS and CA authentication in Docker
Table of contents 1. Generate a certificate 2. En...
Unbind SSH key pairs from one or more Linux instances
DetachKeyPair Unbind SSH key pairs from one or mo...
mysql8.0.11 winx64 installation and configuration tutorial
The installation tutorial of mysql 8.0.11 winx64 ...
Detailed explanation of docker compose usage
Table of contents Docker Compose usage scenarios ...
Fixed table width table-layout: fixed
In order to make the table fill the screen (the re...
Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]
This article describes the MySQL single table que...
JavaScript dynamically generates a table with row deletion function
This article example shares the specific code of ...
Solution to the problem that the audio component of WeChat applet cannot be played on iOS
Solution: Bind the click event to the audio compo...
JavaScript message box example
Three types of message boxes can be created in Ja...
A brief discussion on HTML table tags
Mainly discuss its structure and some important pr...
Solve the problem that Docker cannot ping the host machine under Mac
Solution Abandon the Linux virtual machine that c...