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

Nginx load balancing configuration, automatic switching mode when downtime occurs

The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked

Three functions: 1. Automatic vertical centering o...

How to use translate and transition in CSS3

Nginx load balancing configuration, automatic switching mode when downtime occurs

Vue front-end development auxiliary function state management detailed example

Detailed tutorial on installing different (two) versions of MySQL database on Windows

How to use CSS styles and selectors

VMWare15 installs Mac OS system (graphic tutorial)

CSS3 implements the sample code of NES game console

Common functions of MySQL basics

Debian virtual machine created by VirtualBox shares files with Windows host

How to enter and exit the Docker container

Nodejs implements intranet penetration service

Recommend

Tutorial on installing MySQL database and using Navicat for MySQL

The difference between ${param} and #{param} in MySQL

Sample code for achieving small triangle border effect with pure CSS3+DIV

Several methods to clear floating (recommended)

A brief discussion on the solution to excessive data in ElementUI el-select

Description and use of table attributes CellPad, CellSpace and Border in web page production

What is the function of !-- -- in HTML page style?

Implementation steps for setting up the React+Ant Design development environment

An article to understand operators in ECMAScript

React native realizes the monitoring gesture up and down pull effect

Docker and iptables and implementation of bridge mode network isolation and communication operations

Example of adding and deleting range partitions in MySQL 5.5

How to use JavaScript and CSS correctly in XHTML documents

Detailed explanation of MySql view trigger stored procedure

The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked