您将需要在此处执行的操作是使用线性渐变作为背景并为背景位置设置动画。在代码中：

使用线性渐变（红色为50％，蓝色为50％），并告诉浏览器背景是元素宽度（宽度：200％，高度：100％）的2倍，然后告诉它将背景左移。

background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200% 100%;
background-position:left bottom;

悬停时，将背景位置更改为rightbottom和transition:all2sease;，位置将逐渐更改（在linear强硬情况下更好）background-position：right bottom;

至于-vendor-prefix’s，请参阅您的问题的注释

额外 如果您希望颜色具有“过渡”效果，则可以使其宽度为300％，并以34％（稍微大于1/3）开始过渡，然后以65％（小于2 / 3）。

background: linear-gradient(to right, red 34%, blue 65%);
background-size: 300% 100%;