Animatin:在悬停div中的元素之前

Question

ive在动画上遇到了一些问题：元素之前。有点混乱，但我在舞台上留下了我的工作。因此，每个人都可以在此旁边工作：在元素之前 - fa中的箭头。它应该平稳滑到右侧，但它只有设置过渡时间的跳跃Eaven。

HTML和CSS：

.seemore span {
  overflow: hidden;
  position: relative;
  color: white;
  left: -90px;
  width: 10px !important;
}
.seemore {
  overflow: hidden;
  transition: all 0.35s ease-in-out;
}
.usluga:hover {
  background: #dc0d1d;
  transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
  /* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
  color: white !important;
  transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
  left: 0px;
  transition: all 0.35s ease-in-out;
}
.seemore:before {
  content: " ";
  background: red;
  widows: 10px;
  height: 10px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #dc0d1d;
  font-size: 11px;
  padding-right: 0.5em;
  position: absolute;
}
.usluga:hover .seemore:before {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
  left: 130px;
  transition: all 0.3s ease-out;
}

<div class="usluga">
  <p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
  <p class="normalfont">Druk<br>Wielkoformatowy</p>
  <p class="seemore"><span>zobacz więcej</span></p>
</div>

Answer 1

过渡从初始值转换为新值并弹回。

您没有针对元素的初始left属性设置。

只需将left: 0添加到初始统计数据，它应该可以工作。

.seemore span {
  overflow: hidden;
  position: relative;
  color: white;
  left: -90px;
  width: 10px !important;
}
.seemore {
  overflow: hidden;
  transition: all 0.35s ease-in-out;
}
.usluga:hover {
  background: #dc0d1d;
  transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
  /* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
  color: white !important;
  transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
  left: 0px;
  transition: all 0.35s ease-in-out;
}
.seemore:before {
  content: " ";
  background: red;
  widows: 10px;
  height: 10px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #dc0d1d;
  font-size: 11px;
  padding-right: 0.5em;
  position: absolute;
  /* Setting initial 'left' value */
  left: 0;
}
.usluga:hover .seemore:before {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
  left: 130px;
  transition: all 0.3s ease-out;
}

<div class="usluga">
  <p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
  <p class="normalfont">Druk<br>Wielkoformatowy</p>
  <p class="seemore"><span>zobacz więcej</span></p>
</div>