欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 對過渡(transition)進行調(diào)速以及延時

  發(fā)布時間：2020-10-21 17:06:44   作者：hangge   我要評論
這篇文章主要介紹了CSS3 對過渡(transition)進行調(diào)速以及延時，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1，使用調(diào)速函數(shù)控制過渡效果的速度曲線（加速，減速等）

使用調(diào)速函數(shù)可以設(shè)置過渡效果的速度曲線，從而實現(xiàn)過渡效果隨著時間來改變其速度。比如：開始很慢然后加速或者開始很快然后減速。

（1）CSS3定義了如下的調(diào)速函數(shù)：

linear               規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease                規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in            規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out          規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out      規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)    在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。

（2）調(diào)速函數(shù)的使用
使用時只需要把調(diào)速函數(shù)跟在過渡屬性的時間參數(shù)后面。如果不填的話則使用默認調(diào)速函數(shù)（ease）

transition: opacity 10s ease-in-out;

（3）使用樣例1：
下面通過樣例演示各種調(diào)速函數(shù)的效果區(qū)別。鼠標移入方框，方框內(nèi)的方塊會向右移動，同時方塊會旋轉(zhuǎn)，邊角變圓角，背景色和文字顏色也在改變。這些樣式的改變都會有過渡效果，同時由于使用不同的調(diào)速函數(shù)，過渡的快慢也是有區(qū)別的。

<!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）使用樣例2：

下面通過對柱狀圖的寬度改變過渡，演示不同調(diào)速函數(shù)的效果區(qū)別。

<!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，為過渡增加延時

過渡屬性還可以添加一個可選的延時，用以將過渡的開始推遲一段時間。下面是一個等待1秒的例子。
延時1秒

<!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>延時1秒</div>
</div>
</html>

到此這篇關(guān)于CSS3 對過渡(transition)進行調(diào)速以及延時的文章就介紹到這了,更多相關(guān)CSS3 過渡調(diào)速及延時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 用css3實現(xiàn)轉(zhuǎn)換過渡和動畫效果

    這篇文章主要介紹了用css3實現(xiàn)轉(zhuǎn)換過渡和動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-13

  • CSS3實現(xiàn)類似翻書效果的過渡動畫的示例代碼

    這篇文章主要介紹了CSS3實現(xiàn)類似翻書效果的過渡動畫的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編
    2019-09-06

  • css3動畫過渡實現(xiàn)鼠標跟隨導(dǎo)航效果

    這篇文章主要介紹了css3動畫過渡實現(xiàn)鼠標跟隨導(dǎo)航效果的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-08

  • CSS3實現(xiàn)偽類hover離開時平滑過渡效果示例

    本篇文章主要介紹了CSS3實現(xiàn)偽類hover離開時平滑過渡效果示例，具有一定的參考價值，有興趣的可以了解一下
    2017-08-10

  • css3過渡_動力節(jié)點Java學(xué)院整理

    這篇文章主要為大家詳細介紹了css3過渡的相關(guān)資料，用CSS3做一些過渡效果和動畫，特別適合Web前端開發(fā)員學(xué)習(xí)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-07-11

  • 詳解Css3新特性應(yīng)用之過渡與動畫

    本篇文章主要介紹了Css3新特性應(yīng)用之過渡與動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-10

  • CSS3中的元素過渡屬性transition示例詳解

    大家都知道過渡動畫是動畫的基礎(chǔ)，在學(xué)習(xí)動畫屬性之前，我們需要先了解過渡屬性transition，下面這篇文章通過示例代碼給大家詳細介紹了CSS3中的元素過渡屬性transition，有
    2016-11-30

  • CSS3過渡transition效果實例介紹

    這篇文章主要為大家詳細介紹了CSS3過渡transition效果實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-03

最新評論