CSS3 transition properties

The W3C standard describes the transition of CSS3 in this way: "The transition of CSS allows the property value of CSS to transition smoothly within a certain time interval. This effect can be achieved when the mouse clicks, gets focus, It is triggered by a click or any change to the element, and smoothly changes the CSS attribute value with animation effect. "
css3 Transition (CSS Transition) Make the animation more vivid and realistic, let's learn together. CSS Transition.

How does it work?
CSS3 transition effects allow an element to transition from one effect to another. To do this, you must specify two things and specify the duration of the effect.
For example:

.className{

##transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari and Chrome */

-o-transition: width 2s; /* Opera */

}

Note: If not Specifying the animation delay time, the transition will have no effect as the default value is 0.

When the mouse is placed on it, the transformation starts:

##.className:hover{width:300px;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    body{background:#eee;}
    *{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;}
    .wrap{margin:100px;}
    .wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
    .wrap:hover{background:#FFC631;}
</style>
</head>
<body>
  <div class="wrap"></div>
</body>
</html>

Style changes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
  .box{width:100px;height:100px;background:red; 
   transition:1s width,2s height,3s background;}        
  .box:hover{width:500px;height:300px;background:blue;}    
</style>
</head>
<body>    
   <div class="box">
</div>
</body>
</html>

Transition attributes

The following table lists all transition attributes:

##Properties

transition Abbreviation attribute, used to set four transition attributes in one attribute. 3

transition-property Specifies the name of the CSS property that applies the transition. 3

transition-duration Define the time it takes for the transition effect. The default is 0. 3

transition-timing-function Specifies the time curve of the transition effect. The default is "ease". 3

transition-delay Specifies when the transition effect starts. The default is 0. 3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div
    {
    width:100px;
    height:100px;
    background:yellow;
    transition:width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
    }
    div:hover
    {
    width:300px;
    }
</style>
</head>
<body>
  <div></div>
  <p>需要鼠标在图片上面悬停2秒才显示效果</p>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> .box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);} .box:hover{width:500px;} </style> </head> <body> <div class="box"></div> </body> </html>

submit Reset Code

Automatic operation

CSS3 transition properties

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]