CSS3中的Transition過度與Animation動畫屬性使用要點

發(fā)布時間：2016-05-20 12:19:25 作者：佚名

這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當然進一步的控制還是需要JavaScript的幫助,需要的朋友可以參考下

Transition（過度）
Transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值，它的語法如下：

CSS Code復制內(nèi)容到剪貼板

transition: property duration timing-function delay;
/*
property：執(zhí)行過渡的屬性
duration：執(zhí)行過渡的持續(xù)時間
timing-function：執(zhí)行過渡的速率模式
delay：延時多久執(zhí)行
*/

transition-property
可取值：

none
沒有屬性會獲得過渡效果。
all
所有屬性都將獲得過渡效果。
property
定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

CSS Code復制內(nèi)容到剪貼板

div{
transition-property:width;
-moz-transition-property: width;/* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width;
/* Opera */}

transition-duration
參數(shù)為時間，單位為s（秒）或者ms（毫秒），默認就是0，回想一下如果只有transform屬性，是不是變換啪地一下完成了。

CSS Code復制內(nèi)容到剪貼板

div{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */}

transition-timing-function

既然是動畫，那么就有動畫的運行速率，不同的速度會產(chǎn)生不同的結(jié)果，以下是可取值。

ease：（逐漸變慢）默認值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
2016520122009291.png (491×167)

transition-delay
參數(shù)為時間，單位為s（秒）或者ms（毫秒），默認就是0，也就是立即執(zhí)行，如果在多個動畫直接有先后順序，那么它就會派上用場。

Animation（動畫）
關(guān)鍵幀 Keyframe
實現(xiàn)自定義動畫，通過對關(guān)鍵幀的設定來實現(xiàn)，也就是規(guī)定從起始點（0%）到終點（100%）之間的具體節(jié)點上的動畫樣式。就好比一個人起床，睜開眼睛（0%），站起來（10%），穿上衣（40%），穿褲子（80%），整理面容（100%），這樣子把每個節(jié)點串起來便是動畫了。

再說動畫
動畫，關(guān)鍵在于動字，那么對于頁面上的元素來說，能發(fā)生變化的便是它的樣式屬性，比如用animation規(guī)定自定義動畫，內(nèi)容為font-size從18px，變?yōu)?8px，這個便是動，加上其自身的屬性（它可以規(guī)定動畫持續(xù)時間，運動形式等等），便可以呈現(xiàn)動態(tài)的效果，而不是一瞬間的變化。

通常，transition要想實現(xiàn)動畫通常需要由hover偽類來觸發(fā)，否則在頁面加載的時候它已經(jīng)運動完畢，保持運動的末態(tài)，這并不是我們想要的。animation不一樣，它擁有更多的表現(xiàn)形式，使其看起來像與生俱來，天生就會動一樣。

語法

CSS Code復制內(nèi)容到剪貼板

.area{
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
-webkit-animation-name:'demo';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
-webkit-animation-duration: 10s;/*動畫持續(xù)時間*/
-webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/
-webkit-animation-delay: 2s;/*動畫延遲時間*/
-webkit-animation-iteration-count: infinite;/*定義循環(huán)資料，infinite為無限次*/
-webkit-animation-direction: alternate;/*定義動畫方式*/
}