提示：系统默认是从左到右、从上到下过渡的。
一、从右向左过渡
思路：主要是把div固定在右边，从而使只能向左扩展过渡
.ltr {
width: 20px;
height: 60px;
background-color: pink;
transition: width 2s;
position: absolute;
right: 0;
}
.ltr:hover {
width: 200px;
}
效果图
二、从下到上过渡
思路：主要是把div固定在底部，从而使只能向上扩展过渡
.down-up {
height: 20px;
width: 160px;
background-color: rgb(85, 180, 187);
transition: height 2s;
position: absolute;
bottom: 0;
}
.down-up:hover {
height: 200px;
}
效果图
此篇文章还写了进阶版，主要实现多个内容排列时从下到上过渡 或者 从左到右过渡。大家感兴趣可以看看。