动画：在悬停div内的元素之前

Question

我在动画方面遇到了一些问题：在元素之前。它有点乱，但是我把它留在舞台上，我结束了我的工作。因此，每个人都在旁边工作：在元素之前 - 在FA中的箭头。它应该平稳地向右侧滑动，但它的过渡时间只有它的跳跃性。

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>