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.
a - Move a unit distance horizontally (left and right), that is, on the x-axis. For example, if it is 10px, then move 10px. Positive values move to the right, and negative values move to the left. b - Move b unit distance vertically (up and down), that is, on the y-axis. For example, if it is 50px, then move 10px. Positive values move downward, and negative values move upward.

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

transition: property duration timing-function delay

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

Web page creation question: Image file path

How to use translate and transition in CSS3

Web page creation question: Image file path

Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage

Use of Linux tr command

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

The complete process of iptables rules in Docker being lost after iptables restart

Implementing shopping cart function based on vuex

How to use MySQL 5.7 temporary tablespace to avoid pitfalls

Tomcat Nginx Redis session sharing process diagram

MySQL 5.7.17 winx64 installation and configuration method graphic tutorial

Recommend

12 Laws of Web Design for Clean Code [Graphic]

How to set directory whitelist and IP whitelist in nginx

How to check if a table exists in MySQL and then delete it in batches

MySql development of automatic synchronization table structure

MySQL online log library migration example

A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)

Solution to the problem that Docker container cannot be stopped or killed

How to implement scheduled automatic backup of MySQL under CentOS7

Implementation of mysql backup strategy (full backup + incremental backup)

MySQL 5.7 and above version download and installation graphic tutorial

Key issues and solutions for web page access speed

How to install docker on ubuntu20.04 LTS

Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps

Detailed tutorial on how to use docker to build a laravel development environment in win10 home version

The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7