Transition動畫過分效果

transition-property                       規定設置過渡效果的 CSS 屬性的名稱。一般設置成allhtml

transition-duration                       規定完成過渡效果須要多少秒或毫秒。web

transition-timing-function:        規定速度效果的速度曲線。函數

  

Linear        spa

規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。htm

Ease        blog

規定慢速開始,而後變快,而後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。ci

ease-in        it

規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。io

ease-out        table

規定以慢速結束的過渡效果(等於 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 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

transition-delay                                  定義過渡效果什麼時候開始,延遲多長時間執行。

/*Top Menu*/
#nav li.level-top > a.level-top > span ,#nav1 li.level-top > a.level-top > span {position: relative; z-index: 2}
#nav li.level-top > a.level-top, #nav1 li.level-top > a.level-top { position: relative;}
#nav li.level-top > a:after, #nav1 li.level-top > a:after{ 
    	transition:all 0.3s ease 0s; 
	-moz-transition: all 0.3s ease 0s; 
	-webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s; 
}
#nav li.level-top > a:after, #nav1 li.level-top > a:after{
	content: "";
	position: absolute;
	left: 0%;
	width: 100%;
	bottom: 50%;
	height: 0;
	background: #eb6e3e none repeat scroll 0 0!important;
} 
#nav li.over > a:after, #nav1 li.over > a:after{
	width: 100%;
	height: 100%;
	left:0;
	bottom: 0;
}
相關文章
相關標籤/搜索