css---transition 设置元素过渡效果

例子1：

div
{
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

上面代码的效果：将鼠标放在div元素上面时候，逐步改变表格的宽度从100px到300px

属性：

• transition-property：css属性的name，trabsition的效果
• transition-duration：效果需要指定的秒或者豪秒，默认是0，不会有效果
• transition-timing-function：指定transition效果的转速曲线，默认ease
• transition-delay：定义transition效果开始的时候

// 过渡效果以同样的速度从开始到结束，该值有很多，可看官方文档
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
// 效果执行5s
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
// 等待两秒之后切换效果才开始
transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

transition-timing-function几个默认值：

属性用法：

transition: property duration timing-function delay;

例子2:

transition: box-shadow .25s ease,transform .25s ease;
 &:hover{
        transform: translate3d(0,-5px,0);
        box-shadow: 0 1.5rem 2.5rem rgba(22,28,45,.1),0 .3rem 0.5rem -.50rem rgba(22,28,45,.05) !important;
      }

当鼠标放在指定元素的时候，box-shadow要在0.25s时变化，tranform的变化同理