css3過渡

Soarkey 發(fā)布于2019-08-29 16:22 / 496人閱讀

摘要：即該兩個狀態(tài)變化的過渡曲線一個過渡函數(shù)其取值是一個三次方的貝塞爾曲線的值。分別有四個點，對應(yīng)于三次方的貝塞爾曲線。規(guī)定過渡效果開始作用之前需要等待的時間。如下過渡總寫

css過渡
css過渡為一種狀態(tài)到另外一種狀態(tài)的變換

transition 過渡

transition 為一個簡寫屬性，是一個transition-property （定義過渡的屬性的名稱）以及 transition-duration （定義過渡屬性的所需動畫的時間）和 transition-timing-function （描述中間值如何計算的）以及 transition-delay （描述過渡效果開始作用之前需要等待的時間）

transition-property

transition-property 定義過渡屬性的名稱
即指定引用過渡屬性的名稱

例如要對width屬性應(yīng)用過渡動畫，則其該屬性的值為width。規(guī)定的屬性動畫值有在這 https://developer.mozilla.org...   該列表列出來的屬性為可動畫的屬性。

其css如下

div {
    width:300px;
    height:400px;
    background:#698771;
}
div:hover {
    background:#ededed;
    transition-property:background;
}

html 如下




    
    
    form表單

由于沒有設(shè)置過渡的時間，所以效果不大

transition-duration

transition-duration這是一個過渡時間的設(shè)置。
設(shè)置過渡的時間為3s

非常明顯出現(xiàn)過渡的效果
下面是css

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:background;
    transition-duration:3s;
}
div:hover {
    background:#ededed;
    transition-property:background;
    transition-duration:3s;
}

下面是html




    
    
    form表單

transition-timing-function

該屬性用于描述屬性的中間值。即該兩個狀態(tài)變化的過渡曲線

single-transition-timing-function （一個過渡函數(shù) ）

其取值是一個三次方的貝塞爾曲線的值。填入一個三個值，根據(jù)貝塞爾曲線
參考 https://zh.wikipedia.org/wiki...
http://www.html-js.com/articl...
在adobe系列的軟件中ai，ps等都應(yīng)有了貝塞爾曲線，css中也有貝塞爾曲函數(shù)。
獲取一些常見的貝塞爾曲線
github https://github.com/ai/easings...
https://easings.net/zh-cn
根據(jù)這個選擇一些常見的貝塞爾曲線。
除了貝塞爾曲線以外還有一些其他的函數(shù)，依次說明

貝塞爾曲線 一個栗子

選擇一個貝塞爾曲線

然后html如下




    
    
    form表單

其css如下

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
    trasition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
div:hover {
    width:100%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

其效果如下

大概解釋一下

cubic-bezier為一個時序功能的類，該類有四個參數(shù)。分別有四個點，對應(yīng)于三次方的貝塞爾曲線。

p0和p1為起點和終點，其中p0和p1兩個值都是固定的分別為(0,0)和(1， 1)這是兩個起始值和終止值，其中傳入該參數(shù)的為p1和p2的值，（p1和p2的值只能在[0,1]的范圍內(nèi)，否則css將會忽視該屬性的值）

階躍函數(shù) / 赫維賽德函數(shù) / Step function

steps()定義了一個階躍函數(shù)
定義，如果實數(shù)域上的某個函數(shù)可以用半開區(qū)間上的指示函數(shù)的有限的線性組合表示，其為階躍函數(shù)

即，階躍函數(shù)為有限段的分段常數(shù)函數(shù)的 組合

參考; https://en.wikipedia.org/wiki...

舉栗子

steps(2, start)

start(4, end)

start 表示左連續(xù)函數(shù) 在動畫開始時發(fā)生第一步
end 表示右連續(xù)函數(shù) 在動畫結(jié)束時發(fā)生最后一步 為默認(rèn)值

同樣的該函數(shù)僅僅在[0, 1]區(qū)間內(nèi)

css

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:100%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: steps(5, end);
}

html




    
    
    form表單

幀函數(shù)

https://www.w3.org/TR/css-tim...
同理根據(jù)名字可知為一幀一幀的

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:100%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: frames(10);
}

由于是草案，暫時不可用

一些定義的關(guān)鍵字 linner

一個一次函數(shù)，經(jīng)過原點恒定的速率運動

ease

動畫開始緩慢，急劇加速，然后逐漸減慢

ease-in

動畫開始緩慢，然后逐漸加速直到結(jié)束，此時它突然停止。

ease-in-out

動畫開始緩慢，加速，然后減速到最后。

ease-out

動畫突然開始，然后逐漸減慢到最后。

step-start

動畫會立即跳轉(zhuǎn)到最終狀態(tài)，直到結(jié)束。

step-end

動畫保持其初始狀態(tài)直到結(jié)束，此時它直接跳轉(zhuǎn)到最終狀態(tài)。

transition-delay

規(guī)定過渡效果開始作用之前需要等待的時間。

css如下

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:80%;
    transition-property:width;
    transition-duration:3s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition-delay: 2s;
}

過渡總寫

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    transition-property:width;
    transition-duration:3s;
}
div:hover {
    width:80%;
    background:#e8e899;
    transform:width 2s cubic-bezier(0.95, 0.05, 0.795, 0.035) .5s, background 6s cubic-bezier(0.95, 0.05, 0.795, 0.035) 5s;
}