css从中间向两侧过度

CSS的过渡效果一直以来都是前端开发人员追求的目标之一。而从中间向两侧过度效果，是一种非常炫酷的过渡效果，特别适合在网站或应用程序中展示。

.transition {
   position: relative;
   overflow: hidden;
   background-color: #fff;
   height: 50px;
   width: 200px;
   margin: 0 auto;
   border: 1px solid #ccc;
}
.transition::before,.transition::after {
   position: absolute;
   content: '';
   top: 0;
   bottom: 0;
   width: 50%;
   z-index: -1;
}
.transition::before {
   left: 0;
   background-color: #0077ff;
   transform: translateX(-100%);
   transition: transform 0.6s ease;
}
.transition::after {
   right: 0;
   background-color: #ff7020;
   transform: translateX(100%);
   transition: transform 0.6s ease;
}
.transition:hover::before {
   transform: translateX(0);
}
.transition:hover::after {
   transform: translateX(0);
}

以上代码中，首先创建一个position为relative的容器，用来装载我们的过渡效果。然后利用伪元素::before和::after来创建两个半屏幕宽度的元素，一个居左，一个居右，用于表示过渡效果的颜色。默认情况下，他们都是隐藏的，且没有背景颜色。

接下来用hover伪类选择器来显示元素。当鼠标移动到容器上时，左右两个伪元素将分别从两侧平移并显示。整个过渡效果持续时间为0.6秒，Easing函数为Ease，可以根据需要进行修改。

最后，我们需要注意的是，这个过渡效果只适用于背景颜色，如果需要使用其他的CSS属性进行过渡，需要在代码中加上相应的属性。并且这种效果还需要考虑兼容性问题，因此在实际项目中需要进行一些适当的调整。