CSS3 speeds up and delays transitions

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

Recommend

Analysis of MySql index usage strategy

MySql Index Index advantages 1. You can ensure th...

Complete steps to install boost library under linux

Preface The Boost library is a portable, source-c...

Graphic tutorial on installing Mac system in virtual machine under win10

1. Download the virtual machine version 15.5.1 I ...

Solve the problem that the docker container cannot ping the external network

Today, when I was building a redis environment in...

Implementation example of video player based on Vue

When the existing video player cannot meet the ne...

JavaScript to achieve product magnifying glass effect

This article shares the specific code of JavaScri...

How to customize at and cron scheduled tasks in Linux

There are two types of scheduled tasks in Linux s...

Detailed explanation of Nginx installation, SSL configuration and common commands under Centos7.x

1. Installation Install using yum ##Automatically...

Implementation of CSS dynamic height transition animation effect

This question originated from a message on Nugget...

HTML meta explained

Introduction The meta tag is an auxiliary tag in ...

Chrome monitors cookie changes and assigns values

The following code introduces Chrome's monito...

Detailed explanation of Vue + Axios request interface method and parameter passing method

Table of contents 1. Get request: 2. Post request...

Example code of CSS layout at both ends (using parent's negative margin)

Recently, during the development process, I encou...

Implementation of multi-site configuration of Nginx on Mac M1

Note: nginx installed via brew Website root direc...

Vue realizes screen adaptation of large screen pages

This article shares the specific code of Vue to a...