Animation功能中實現(xiàn)動畫的方法
方法
屬性值的變化速度
linear
在動畫開始與結(jié)束時以同樣速度驚醒改變
ease-in
動畫開始時速度很慢，然后速度沿曲線值進行加快
ease-out
動畫開始時速度很快诫龙，然后速度沿曲線值進行放慢
ease
動畫開始時速度很慢隘竭，然后速度沿曲線值進行加快仗嗦，然后再沿曲線值進行放慢
ease-in-out
動畫開始時速度很慢称勋，然后速度沿曲線值進行加快藐翎，然后再沿曲線值進行放慢
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
實現(xiàn)動畫的各種方法的比較示例
type=“text/css”>
@keyframesmycolor{
0%{
width:100px;
height:100px;
}
100%{
width:500px;
height:500px;
}
}
div{
background-color:red;
width:500px;
height:500px;
animation-name:mycolor;
animation-duration:5s;
animation-timing-function:ease-out;
}
通過以上代碼我們可以看出Animations功能中各種實現(xiàn)的方法的區(qū)別嘀掸，該示例中有一個div元素紫岩，頁面打開時，該div元素在5秒內(nèi)從長100px睬塌、寬100px擴大到長500px泉蝌、寬500px，通過改變Animation-timing-function屬性的屬性值揩晴，然后觀察div元素額長度和寬度再整個動畫中的變化速度勋陪，可以看出實現(xiàn)動畫的各種方法之間的區(qū)別。
最后介紹下如何使用animation功能來實現(xiàn)網(wǎng)頁設(shè)計中的一種經(jīng)常使用的動畫效果——網(wǎng)頁的淡入效果硫兰。通過再開始幀與結(jié)束幀中改變頁面的opacity屬性的屬性值來實現(xiàn)頁面淡入的效果诅愚。代碼如下：
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
實現(xiàn)網(wǎng)頁淡入的效果示例
type=“text/css”>
@keyframesfadein{
0%{
opacity:0;
background-color:white;
}
100%{
opacity:1;
background-color:white;
}
}
示例文字
歡迎加入技術(shù)QQ群：364595326
