总结CSS3新特性(Transition篇)

发表于:2015-07-21 15:14:19 | 阅读数:--次| 作者:html,css

摘要：CSS 过渡（transition）, 是CSS3规范的一部分, 用来控制 CSS 属性的变化速率。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。Transit...

CSS 过渡（transition）, 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。

Transition是一个简写属性,四个值(单独使用均加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能使页面看上去更富有动感,下面是一个按钮的简单例子;

.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);
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.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;

本文如有不足或错误,还请指出.共同学习;

部分参考资料: