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

Solution to the initialization error when installing mysql5.7 from rpm package in centos6.5

1. Upload rz to the server and decompress it rz [...

Implementing shopping cart function based on vuex

This article example shares the specific code of ...

Detailed explanation of single-row function code of date type in MySQL

Date-type single-row functions in MySQL: CURDATE(...

Introduction to the use of select optgroup tag in html

Occasionally, I need to group select contents. In ...

Methods and steps to upgrade MySql5.x to MySql8.x

Several Differences Between MySQL 5.x and MySQL 8...

How to use async and await in JS

Table of contents 1. async 2. await: 3. Comprehen...

Writing a shell script in Ubuntu to start automatically at boot (recommended)

The purpose of writing scripts is to avoid having...

CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)

Note 1: Solve the problem of slow connection to M...

Share 12 commonly used Loaders in Webpack (Summary)

Table of contents Preface style-loader css-loader...

Introduction to MySQL statement comments

MySQL supports three types of comments: 1. From t...

Nexus private server construction principle and tutorial analysis

one. Why build a Nexus private server? All develo...

Guide to Efficient Use of MySQL Indexes

Preface I believe most people have used MySQL and...

Detailed explanation of installing redis in docker and starting it as a configuration file

Update: Recently, it was discovered that the serv...

Some key points of website visual design

From handicraft design to graphic design to web de...

Realizing provincial and municipal linkage effects based on JavaScript

This article shares the specific code of JavaScri...