如何使用css动画匹配悬停按钮效果？

我试图复制一个按钮悬停效果到预加载

当按钮处于悬停状态时，蓝色从左向右移动，当你离开时，白色从左边进入，在右边结束

这正是我试图复制的理想情况，请参见下面的代码笔链接：

钮扣

/*HTML*/
/*CSS*/
.btnslide{
字体系列：“futura-pt”；
字体大小：14px；
背景色：#fff；
颜色：#2A4173；
边框：2px实心#2A4173；
显示：内联块；
填充：10px 45px；
文字装饰：无；
文本对齐：居中；
位置：相对位置；
边缘底部：1米；
大纲：无；
-webkit外观：无；
边界半径：0
}    
.btnslide img{
最大高度：10px；
左边距：5px
}    
.btnslide img.white{
显示：无
}    
.btnslide:悬停在蓝色图标上{
显示：无
}    
.BTN滑动：悬停图像为白色{
显示：内联块
}    
.btnslide:以前{
背景色：#2A4173；
内容：“；
颜色：#fff！重要；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
-webkit转换：scaleX（0）；
-ms变换：scaleX（0）；
变换：scaleX（0）；
-webkit转换原点：右；
-ms变换原点：右；
变换原点：右；
-webkit变换：-webkit变换.4s立方贝塞尔（.19,1,22,1）；
转换：-webkit转换.4s立方贝塞尔（.19,1,22,1）；
-o-变换：变换.4s立方贝塞尔（.19,1,22,1）；
变换：变换.4s立方贝塞尔（.19,1,22,1）；
转换：transform.4s立方贝塞尔（.19,1,22,1），-webkit transform.4s立方贝塞尔（.19,1,22,1）；
将改变：转变
}    
.BTN滑动：悬停：之前{
-webkit转换：scaleX（1）；
-ms变换：scaleX（1）；
变换：scaleX（1）；
-webkit变换原点：左；
-ms变换原点：左；
变换原点：左
}    
.btnslide:悬停span.text{
颜色：#fff
}    
.btnslide span.text{
-webkit转换：颜色.4s立方贝塞尔（.19,1,22,1）；
-o-过渡：颜色.4s立方贝塞尔（.19,1,22,1）；
过渡：颜色.4s立方贝塞尔（.19,1,22,1）；
位置：相对位置；
z指数：2
}    
.btnslide span.text span.plus{
字体大小：25px；
线高：0；
位置：相对位置；
顶部：3件
}

我几乎让它工作了蓝色进来，然后白色进来，但它显示白色从右边进来，我试图阻止它

预紧器

/*HTML*/
/*CSS*/
* {
保证金：0；
填充：0；
}    
.btnslide{
宽度：100%；
字体大小：14px；
背景色：#fff；
颜色：#2A4173；
显示：内联块；
文本对齐：居中；
位置：固定；
大纲：无；
-webkit外观：无；
边界半径：0；
排名：0；
左：0；
高度：100vh；
}
.btnslide span.text{
-webkit过渡：颜色0.4s立方贝塞尔（0.19,1,0.22,1）；
-o型过渡：彩色0.4s立方贝塞尔（0.19,1,0.22,1）；
过渡：颜色0.4s立方贝塞尔（0.19,1,0.22,1）；
位置：相对位置；
z指数：2；
最高：50%；
转化：translateY（-50%）；
显示：块；
}
.btnslide span.text img{
最大高度：150像素；
}
.btnslide:以前{
背景色：#2A4173；
内容：“；
颜色：#fff！重要；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
-webkit转换：scaleX（0）；
-ms变换：scaleX（0）；
变换：scaleX（0）；
-webkit转换原点：右；
-ms变换原点：右；
变换原点：右；
-webkit变换：-webkit变换5s立方贝塞尔（0.19,1,0.22,1）；
过渡：-webkit变换5s三次贝塞尔（0.19,1,0.22,1）；
-o变换：变换5s三次贝塞尔（0.19,1,0.22,1）；
变换：变换5s三次贝塞尔（0.19,1,0.22,1）；
变换：变换5s立方贝塞尔（0.19,1,0.22,1），-webkit变换5s立方贝塞尔（0.19,1,0.22,1）；
改变：转变；
-webkit动画：fontbulger 5s无限；
/*狩猎4+*/
-moz动画：fontbulger 5s无限；
/*外汇5+*/
-o-动画：fontbulger 5s无限；
/*歌剧院12+*/
动画：fontbulger 5s无限；
}
@关键帧{
0% {
-webkit转换：scaleX（0）；
-ms变换：scaleX（0）；
变换：scaleX（0）；
-webkit变换原点：左；
-ms变换原点：左；
变换原点：左；
}
30% {
-webkit转换：scaleX（1）；
-ms变换：scaleX（1）；
变换：scaleX（1）；
-webkit变换原点：左；
-ms变换原点：左；
变换原点：左；
}
60% {
-webkit转换原点：右；
-ms变换原点：右；
变换原点：右；
排名：0；
右：0；
左：未设置；
}
100% {
-webkit转换：scaleX（0）；
-ms变换：scaleX（0）；
变换：scaleX（0）；
-webkit转换原点：右；
-ms变换原点：右；
变换原点：右；
排名：0；
右：0；
左：未设置；
}
}
.BTN滑动：悬停：之前{
-webkit转换：scaleX（1）；
-ms变换：scaleX（1）；
变换：scaleX（1）；
-webkit变换原点：左；
-ms变换原点：左；
变换原点：左；
}

我不知道是否有一个更简单的方法来实现这一点，但我真的非常感谢任何人提供的任何帮助

---

再次感谢

问题是，任何简单的方法都不会以你想要的方式工作，因为使用CSS转换并不是一个真正的选项（它们会反转，当你离开悬停时，你会想要不同的效果，但CSS无法知道）。Yeh认为使用动画来实现这一点太复杂了，要么是这样，要么就是我有一个巨大的固定宽度div，它是蓝色的，可以穿过屏幕-

/* HTML */
<a href="#" class="btnslide"><span class="text">View Our Projects</span></a>

/* CSS */
    .btnslide {
font-family:'futura-pt';
font-size:14px;
background-color:#fff;
color:#2A4173;
border:2px solid #2A4173;
display:inline-block;
padding:10px 45px;
text-decoration:none;
text-align:center;
position:relative;
margin-bottom:1em;
outline:none;
-webkit-appearance:none;
border-radius:0
}    

.btnslide img {
max-height:10px;
margin-left:5px
}    

.btnslide img.white {
display:none
}    

.btnslide:hover img.blue {
display:none
}    

.btnslide:hover img.white {
display:inline-block
}    

.btnslide:before {
background-color:#2A4173;
content:"";
color:#fff!important;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transform:scaleX(0);
-ms-transform:scaleX(0);
transform:scaleX(0);
-webkit-transform-origin:right;
-ms-transform-origin:right;
transform-origin:right;
-webkit-transition:-webkit-transform .4s cubic-bezier(.19,1,.22,1);
transition:-webkit-transform .4s cubic-bezier(.19,1,.22,1);
-o-transition:transform .4s cubic-bezier(.19,1,.22,1);
transition:transform .4s cubic-bezier(.19,1,.22,1);
transition:transform .4s cubic-bezier(.19,1,.22,1),-webkit-transform .4s cubic-bezier(.19,1,.22,1);
will-change:transform
}    

.btnslide:hover:before {
-webkit-transform:scaleX(1);
-ms-transform:scaleX(1);
transform:scaleX(1);
-webkit-transform-origin:left;
-ms-transform-origin:left;
transform-origin:left
}    

.btnslide:hover span.text {
color:#fff
}    

.btnslide span.text {
-webkit-transition:color .4s cubic-bezier(.19,1,.22,1);
-o-transition:color .4s cubic-bezier(.19,1,.22,1);
transition:color .4s cubic-bezier(.19,1,.22,1);
position:relative;
z-index:2
}    

.btnslide span.text span.plus {
font-size:25px;
line-height:0;
position:relative;
top:3px
}

 /* HTML */
 <a href="#" class="btnslide"><span class="text">View Our Projects</span></a>

/* CSS */
* {
  margin: 0;
  padding: 0;
}    

.btnslide {
  width: 100%;
  font-size: 14px;
  background-color: #fff;
  color: #2A4173;
  display: inline-block;
  text-align: center;
  position: fixed;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
  top: 0;
  left: 0;
  height: 100vh;
}
.btnslide span.text {
  -webkit-transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.btnslide span.text img {
  max-height: 150px;
}
.btnslide:before {
  background-color: #2A4173;
  content: "";
  color: #fff !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-transition: -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
  -webkit-animation: fontbulger 5s infinite;
  /* Safari 4+ */
  -moz-animation: fontbulger 5s infinite;
  /* Fx 5+ */
  -o-animation: fontbulger 5s infinite;
  /* Opera 12+ */
  animation: fontbulger 5s infinite;
}
@keyframes fontbulger {
  0% {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  30% {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  60% {
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    top: 0;
    right: 0;
    left: unset;
  }
  100% {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    top: 0;
    right: 0;
    left: unset;
  }
}
.btnslide:hover:before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}