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
Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7
1. Official website address The official website ...
Introduction to 10 online development tools for web design
1. Online Text Generator BlindTextGenerator: For ...
11 Reasons Why Bootstrap Is So Popular
Preface Bootstrap, the most popular front-end dev...
Detailed explanation of publicPath usage in Webpack
Table of contents output output.path output.publi...
How to enter and exit the Docker container
1 Start the Docker service First you need to know...
Introduction to the B-Tree Insertion Process
In the previous article https://www.jb51.net/arti...
Detailed steps to build a file server in Windows Server 2012
The file server is one of the most commonly used ...
A brief introduction to the differences between HTML and XHTML, and HTML4 and HTML5 tags
Difference between HTML and XHTML 1. XHTML elemen...
How to install Nginx in Docker
Install Nginx on Docker Nginx is a high-performan...
CSS3 to achieve simple white cloud floating background effect
This is a very simple pure CSS3 white cloud float...
CSS XTHML writing standards and common problems summary (page optimization)
Project Documentation Directory Div+CSS Naming Sta...
PHP-HTMLhtml important knowledge points notes (must read)
1. Use frameset, frame and iframe to realize mult...
Linux Check the installation location of the software simple method
1. Check the software installation path: There is...
Summary of the application of transition components in Vue projects
Transtion in vue is an animation transition enca...
Ubuntu regularly executes Python script example code
Original link: https://vien.tech/article/157 Pref...