Transition in CSS3

Transition is one of the features with special functions in CSS3. You can add transition effects to elements when they change from one style to another without using flash animation or JS timer.

Browser support

Internet Explorer 10, Firefox, Opera and Chrome support the transition attribute.
Safari supports the alternative -webkit-transition property.

note:

Internet Explorer 9 and earlier browsers do not support the transition attribute.

Transition shorthand syntax

transition: property(要过渡的属性) duration(花费的时间) timing-function(运动曲线) delay(何时开始);

transition attribute

Attribute value	description
transition-property	Specify the name of the CSS property, such as width, height, if you want all properties to be changed, just write an all
transition-duration	The transition effect needs to specify how many seconds or milliseconds to complete
transition-timing-function	Specify the speed curve of the transition effect. The default is ease (gradually slower) and other parameters linear (uniform speed), ease-in (acceleration), ease-out (deceleration), ease-in-out (accelerate first, then decelerate)
transition-delay	When defining the transition effect, the unit is seconds (s).

Instance

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3transition动画</title>
    <style>
        div {
     
     
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
            transition: all 2s ease;
        }

        div:hover {
     
     
            background-color: pink;
            width: 500px;
            height: 500px;
            position: relative;
            top: 50px;
            left: 40px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

Transition in CSS3

Transition in CSS3

Browser support

note:

Transition shorthand syntax

transition attribute

Instance

Guess you like