CSS3的相關屬性特點詳解

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

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

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

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