如果想做出细腻的过渡，那么这个可能会满足你的需求。这个简单的来说就是用来模拟需要变化的，从开始到结束数值之过渡。

transition 是简写，用于设置四个过渡：

transition 用来设置状态从开始到结束中间这个过程的变化。它是 transition-property、transition-duration、transition-timing-function、transition-delay、这四个的缩写。它们分别代表了：要使用过度动画的、过渡动画的时间、过渡动画的加速度即数值变化的快慢过程、过渡动画的延迟时间。而我们通常使用过渡完成元素过渡的这个过程一般使用 transition 。

.demo{
    transition: property duration timing-function delay;
}

值说明：

1. 当鼠标移动到元素上，使用过渡来让元素的高度变化，从而实现过渡。

<div class="demo"></div>

.demo{
    width: px;
    height: px;
    background: #000;
    transition: height s;
}
.demo:hover{
    height: px;
}

图：

写法一：

.demo{
    width: px;
    height: px;
    background: #000;
    transition: height s,width s;
}
.demo:hover{
    width: px;
    height: px;
}

写法二：

.demo{
    width: px;
    height: px;
    background: #000;
    transition: all s;
}
.demo:hover{
    width: px;
    height: px;
}

图：

说明：这两种方式都可以实现我们所要的过渡方式。不过这里推荐使用第一种方式。

.demo{
    width: px;
    height: px;
    background: #000;
    transition: height s ease-in,width s ease-out;
}
.demo:hover{
    width: px;
    height: px;
}

图：

说明：在 transition 第三个值使用了动画，改变了过渡过程中完成的速度，我们可以很清楚的看到他们的变化速度。

.demo{
    width: px;
    height: px;
    background: #000;
    transition: height s ease-in s,width s ease-out s;
}
.demo:hover{
    width: px;
    height: px;
}

图：

说明：我们可以看到鼠标放到元素上 1s 之后开始动画，而离开元素之后 1s 之后开始动画。

通过上面的实例可以知道 transition 的值配置很灵活，但是我们要遵循一定的规律，这不单是了的可读性，也符合浏览器解析规则的规律。

hover 到按钮上改变按钮的位置和背景颜色。

<button class="demo"></button>

.demo{
    width: px;
    height: px;
    line-height: px;
    border-radius: px;
    background: #000;
    color:#fff;
    border:none;   
    transition: background s,transform s;
}
.demo:hover{
   background: red;
   transform: translateY(-px);  
}

图：