CSS3 speeds up and delays transitions

1. Use the speed control function to control the speed curve of the transition effect (acceleration, deceleration, etc.)

The speed curve of the transition effect can be set by using the speed control function, so that the transition effect changes its speed over time. For example: starting slowly and then speeding up, or starting quickly and then slowing down.

(1) CSS3 defines the following speed control functions:

linear specifies a transition effect that starts and ends at the same speed (equivalent to cubic-bezier(0,0,1,1)).
ease specifies a transition effect that starts slowly, then speeds up, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1)).
ease-in specifies a transition effect that starts slowly (equivalent to cubic-bezier(0.42,0,1,1)).
ease-out specifies a transition effect that ends slowly (equivalent to cubic-bezier(0,0,0.58,1)).
ease-in-out specifies a transition effect that starts and ends slowly (equivalent to cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) defines your own values in the cubic-bezier function. Possible values are numbers between 0 and 1.

(2) Use of the speed control function: When using it, just place the speed control function after the time parameter of the transition attribute. If not filled in, the default speed control function (ease) is used

transition: opacity 10s ease-in-out;

(3) Example 1:
The following examples demonstrate the differences in the effects of various speed control functions. When you move the mouse into the box, the block inside the box will move to the right, and at the same time the block will rotate, the corners will become rounded, and the background color and text color will also change. These style changes will have a transition effect, and because different speed control functions are used, the speed of the transition will also be different.

<!doctype html>
<html lang="en">
    <head>
    <title>hangge.com</title>
    <style>
        .trans_box {
            padding: 20px;
            
            *zoom:1;
        }
 
        .trans_list {
            width: 10%;
            height: 64px;
            margin:10px 0;
            
            color:#fff;
            text-align:center;
        }
 
        .linear {
            -webkit-transition: all 4s linear;
            -moz-transition: all 4s linear;
            -o-transition: all 4s linear;
            transition: all 4s linear;
        }
 
        .ease {
            -webkit-transition: all 4s ease;
            -moz-transition: all 4s ease;
            -o-transition: all 4s ease;
            transition: all 4s ease;
        }
 
        .ease_in {
            -webkit-transition: all 4s ease-in;
            -moz-transition: all 4s ease-in;
            -o-transition: all 4s ease-in;
            transition: all 4s ease-in;
        }
 
        .ease_out {
            -webkit-transition: all 4s ease-out;
            -moz-transition: all 4s ease-out;
            -o-transition: all 4s ease-out;
            transition: all 4s ease-out;
        }
 
        .ease_in_out {
            -webkit-transition: all 4s ease-in-out;
            -moz-transition: all 4s ease-in-out;
            -o-transition: all 4s ease-in-out;
            transition: all 4s ease-in-out;
        }
 
        .trans_box:hover .trans_list, .trans_box_hover .trans_list {
            margin-left:89%;
            
            color:#333;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            -o-border-radius:25px;
            border-radius:25px;    
            -webkit-transform: rotate(360deg);
            -moz-transform:rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);             
        }
    </style>
</head>
<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease<br>(default)</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>   
    <div class="trans_list linear">linear</div>
</div>
</html>

(4) Example 2:

The following demonstrates the difference in the effects of different speed control functions by changing the width of the bar graph.

<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:10px 0;
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
 
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
 
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
 
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}
 
.trans_box:hover div
{
width:500px;
}
</style>
</head>
<body>
<div id="transBox" class="trans_box">    
    <div id="div2" style="top:150px">ease<br>(default)</div>
    <div id="div3" style="top:200px">ease-in</div>
    <div id="div4" style="top:250px">ease-out</div>
    <div id="div5" style="top:300px">ease-in-out</div>
    <div id="div1" style="top:100px">linear</div>
</div>
</body>
</html>

2. Add delay to transition

Transition properties can also take an optional delay, which can be used to delay the start of the transition for a certain period of time. Below is an example that waits for 1 second.
Delay 1 second

<!doctype html>
<html lang="en">
    <head>
    <title>hangge.com</title>
    <style>
        .trans_box3 {
            padding: 20px;
            
            *zoom:1;
        }
 
        .trans_box3 div{
            width:100px;
            height:50px;
            background:#2D9900;
            color:white;
            font-weight:bold;
 
            -webkit-transition: all 2s ease-out 1s;
            -moz-transition: all 2s ease-out 1s;
            -o-transition: all 2s ease-out 1s;
            transition: all 2s ease-out 1s;
        }
 
        .trans_box3:hover div
        {
            width:500px;
        }
    </style>
</head>
<div class="trans_box3"> 
    <div>Delay 1 second</div>
</div>
</html>

This is the end of this article about CSS3 transition speed control and delay. For more relevant CSS3 transition speed control and delay content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to use an image button as a reset form button

>>: JavaScript BOM location object + navigator object + history object