总结CSS3新特性(Transition篇)

　　property

　　duration

　　timing-function

　　delay

过渡就是在一定时间内完成某属性值的改变,所以,transition-duration一定要设置,因为它默认值为0;

Transition-Property:

 要过渡的属性值,只有被指定的属性才会在过度时产生动画效果,可以填all,all为所有可动画属性;

#demo {
    width:20px;
    height:20px;
    background-color:#0080FF;
    transition:width 1.5s;
}
#demo:hover {
    width:30px;
    height:30px;
}

  只会对width的改变产生动画效果↓

  可以选择多个属性的值;

#demo {
    width:20px;
    height:20px;
    background-color:#0080FF;
    transition-property:width , height;/*写多个值用逗号分割*/
    transition-duration:2s;/*过渡持续时间可以只写一个,也可分别指定,同样用逗号分割*/
}

 使用简写时指定多个属性:

#demo {
    width:20px;
    height:20px;
    background-color:#0080FF;
    transition:width 2s, height 4s;/*两条定义之间用逗号分割,后两个值为选填.*/
}

 使用子属性时需要注意几点:

#demo {
    transition-property:width , height , top;
    transition-duration:2s , 3s;/*定义时间个数少于属性个数,会再次循环数组*/
}
/*相当于*/
#demo {
    transition-property:width , height , top;
    transition-duration:2s , 3s , 2s;
}

#demo {
    transition-property:width , height;
    transition-duration:2s , 3s , 2s;/*定义时间个数多于属性个数,多出的值会被截取*/
}
/*相当于*/
#demo {
    transition-property:width , height;
    transition-duration:2s , 3s;
}

Transition-duration:

 设定过渡持续的时间,可以为秒或毫秒,本人理解为过渡就是通过设置的持续时间结合缓动函数计算相应的属性值改变的曲线;

 比如4秒内宽度从100px过渡到200px,简单的分为4帧(假设) 125px-150px-175px-200px;原理应该与animation的from to 类似;

过渡持续2s

过渡持续4s

过渡持续8s

Transition-timing-function:

 设定过渡动画的曲线,这里是W3School的示例,里边用到了是几个常用的,浏览器里内置的几种动画曲线,还可以通过cubic-bezier(n,n,n,n)来进行定制,n为0-1之间的值;

 挺全的一个缓动函数集合,默认不设置时,为ease,慢速开始,然后变快再慢速结束;

Transition-delay:

 设定动画开始前的等待时间(默认为0,无延迟);

鼠标悬浮2s后拉伸

总结:

 使用Transition能使页面看上去更富有动感,下面是一个按钮的简单例子;

Hover me  Hover me

.demo-button {
  border:0px;
  background-color:#2aaacb;
  position:relative;
  padding:0.7em 1.8em;
  font-size:1.1em;
  border-radius:3px;
  margin-right:2em;
  color:#fff;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.demo-button:before {
  content: "";
  z-index:-1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3BD1F8;
  top: 0;
  left: 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#transition-demo1:before {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
#transition-demo1:hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
#transition-demo2:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
#transition-demo2:hover:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

结合transform做的按钮,主要是用到了:before元素,实现这种效果默认时缩小为不可见,hover时还原元素大小,缩放X,Y轴的改变实现了两个不同的button;