CSS3 transition transition

Detailed explanation of the transition attribute of SS3:
This chapter introduces the usage of the transition attribute, which is also an attribute related to animation.
1. Basic knowledge:
Transition translated into Chinese means "transition", which means that the css attribute value of an element can be changed within a certain period of time. Make smooth transitions.
This attribute is a composite attribute like border, background and other attributes.
Syntax structure:

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

Parameter explanation:
1.transition-property: Set or retrieve the properties participating in the transition.
2.transition-duration: Retrieve or set the duration of object transition.
3.transition-timing-function: Retrieve or set the animation type of transition in the object.
4.transition-delay: Retrieve or set the time of object delay transition.
Code examples are as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style>
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
  -moz-transition:width 2s;
  -webkit-transition:width 2s;
  -o-transition:width 2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

The above code demonstrates how to set the width of a div from 100px to 500px with animation effect within two seconds.
Since it is a composite attribute, it is natural to set the attributes separately

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; -webkit-transition:width 2s; -o-transition:width 2s; } #thediv:hover{ width:500px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

submit Reset Code

Automatic operation

CSS3 transition transition

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]