CSS3的相關(guān)屬性特點(diǎn)詳解

1、css3的相關(guān)屬性特點(diǎn)詳解概述 transition屬性可以讓動(dòng)畫(huà)在css層面實(shí)現(xiàn)，此時(shí)不是利用setinterval()，不是定時(shí)器，而是底層c+在渲染，渲染動(dòng)畫(huà)的質(zhì)量、絲滑程度都要遠(yuǎn)遠(yuǎn)優(yōu)于js、jquery。要顛覆我們傳統(tǒng)制作網(wǎng)頁(yè)動(dòng)畫(huà)的思維模式，現(xiàn)在的手機(jī)頁(yè)面中，肯定不會(huì)有任何動(dòng)畫(huà)是setinterval()完成的，而都是過(guò)渡實(shí)現(xiàn)的。今后23年，pc端也會(huì)這樣，過(guò)渡會(huì)淘汰setinterval()和animate函數(shù)。語(yǔ)法：transition: property duration timing-function delay;時(shí)光的單位是：秒（s）。值 解釋 屬性值 描述transitio

2、n-property 指定css屬性的name，transition效果 none 沒(méi)有屬性會(huì)獲得過(guò)渡效果。all 全部屬性都將獲得過(guò)渡效果。property 定義應(yīng)用過(guò)渡效果的 css 屬性名稱列表，列表以逗號(hào)分隔。transition-duration transition效果需要指定多少秒或毫秒才干完成 規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)光（以秒或毫秒計(jì)）。默認(rèn)值是 0，意味著不會(huì)有效果。transition-timing-function指定transition效果的轉(zhuǎn)速曲線linear 以相同速度開(kāi)頭至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。ease 慢速開(kāi)頭，

3、然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in 以慢速開(kāi)頭的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。ease-out 以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out 以慢速開(kāi)頭和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。transition-delay 定義transition效果開(kāi)

4、頭的時(shí)候 指定秒或毫秒數(shù)之前要等待切換效果開(kāi)頭什么屬性可以參加過(guò)渡幾乎全部的css屬性都能過(guò)渡。jquery transitionbackground-colorbackground-positionbackground-image任何的變形transform都能夠過(guò)渡過(guò)渡動(dòng)畫(huà)的觸發(fā)條件任何轉(zhuǎn)變css的狀況，都會(huì)觸發(fā)過(guò)渡。比如：hover、加減類、索性挺直設(shè)置css。例如：挺直設(shè)置css會(huì)引發(fā)過(guò)渡動(dòng)畫(huà)：document.getelementbyid("box").style.width = "300px"類名的轉(zhuǎn)變會(huì)引發(fā)過(guò)渡動(dòng)畫(huà)：document.getelementbyid("box").clas