CSS3 transition

CSS3 Transition

In CSS3, we can transition from one style to another in order to add a certain effect without using Flash animation or JavaScript. .

How does it work?

#CSS3 Transition is the effect of an element gradually changing from one style to another.

To achieve this, two things must be specified:

Specify the CSS property to add the effect
Specify the effect duration.

Transition effect applied to the width attribute, with a duration of 2 seconds:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Note: If the period is not specified, the transition will have no effect because the default value is 0.

The effect will change when the value of the specified CSS property changes. A typical CSS property changes when the user mouses over an element:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background: #d7ffb5;
            transition:width 2s;
            -webkit-transition:width 2s; /* Safari */
        }
        div:hover
        {
            width:300px;
        }
    </style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>

Run the program to try it

Multiple changes

To add multiple styles of transformation effects, add attributes separated by commas:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #92ffc7;
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s, height 2s, transform 2s;
        }
        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

Run Try the program

Transition attributes

The following table lists all transition attributes:

Attribute	Description	CSS
transition	abbreviation attribute, use Used to set four transition properties in one property.	3
transition-property	Specifies the name of the CSS property that applies the transition.	3
transition-duration	Define how long the transition effect takes. 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

##Example

Use all transition attributes:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background: #ffedd7;
            transition-property:width;
            transition-duration:1s;
            transition-timing-function:linear;
            transition-delay:2s;
            /* Safari */
            -webkit-transition-property:width;
            -webkit-transition-duration:1s;
            -webkit-transition-timing-function:linear;
            -webkit-transition-delay:2s;
        }
        div:hover
        {
            width:200px;
        }
    </style>
</head>
<body>
<div>过渡</div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html>

Run the program and try it

The same transition effect as the example above

, but using the abbreviated transition attribute:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            transition:width 1s linear 2s;
            /* Safari */
            -webkit-transition:width 1s linear 2s;
        }
        div:hover
        {
            width:200px;
        }
    </style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html>

Run the program and try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:100px; background: #d7ffb5; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>鼠标移动到 div 元素上，查看过渡效果。</p> </body> </html>

submit Reset Code

Automatic operation

CSS3 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]