码迷,mamicode.com
首页 > 其他好文 > 详细

Transition动画过度效果

时间:2015-11-09 10:40:01      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:

transition-property                       规定设置过渡效果的 CSS 属性的名称。通常设置成all

transition-duration                       规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:        规定速度效果的速度曲线。

  

Linear        

规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

Ease        

规定慢速开始,然后变快,然后慢速结束的过渡效果(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 函数中定义自己的值。可能的值是 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;
}

  

  

Transition动画过度效果

标签:

原文地址:http://www.cnblogs.com/kevindon002/p/4949098.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!