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
Two-hour introductory Docker tutorial
Table of contents 1.0 Introduction 2.0 Docker Ins...
MySQL 4 common master-slave replication architectures
Table of contents One master and multiple slaves ...
Detailed tutorial for installing the unzipped version of mysql5.7.28 winx64 on windows
Table of contents 1. Unzip 2. Create a data folde...
How to build a complete samba server in Linux (centos version)
Preface smb is the name of a protocol that can be...
Docker uses the Prune command to clean up the none image
Table of contents The creation and confusion of n...
Understanding of haslaylout and bfc parsing
1. haslayout and bfc are IE-specific and standard ...
Implementation of Docker deployment of Nuxt.js project
Docker official documentation: https://docs.docke...
Common front-end JavaScript method encapsulation
Table of contents 1. Enter a value and return its...
Detailed explanation of downloading, installing and using nginx server
download http://nginx.org/en/download.html Unzip ...
Summary of the operation records of changing MyISAM storage engine to Innodb in MySQL
In general, MySQL provides a variety of storage e...
Causes and solutions for slow MySQL query speed and poor performance
1. What affects database query speed? 1.1 Four fa...
5 VueUse libraries that can speed up development (summary)
Table of contents What utilities does VueUse have...
Detailed explanation of error handling examples in MySQL stored procedures
This article uses an example to describe the erro...
Copy and paste is the enemy of packaging
Before talking about OO, design patterns, and the ...
Two implementation solutions for vuex data persistence
Table of contents Business requirements: Solution...