CSS 悬停前后背景图像

Question

当您将鼠标悬停在图像上时，蓝色箭头缓慢移动。当您将光标从图像上移开时，白色箭头会急剧返回。如何让白色箭头缓慢返回？@keyframes left_to_right {    from {margin-left: -15px;}    to {margin-left: 0; }}div .footer-text{    position: absolute;    top: 10%;    left: 3%;    height: 20px;    width: 85%;}div .footer-text:after{    content: '';    background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;    width: 130px;    height: 15px;    display: inline-block;    margin-left: 10px;    position: relative;}div:hover .footer-text:before{    content: '';    background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;    width: 130px;    height: 15px;    margin-right: 5px;    display: inline-block;    animation: left_to_right 0.4s ease;}div:hover .footer-text:after{    content: '';    background: none;}div .footer-text span{    position: relative;    top:-5px;    font-size: 12px;    color: #313B78;    display: inline-block;}<div><a href="" class='footer-text'>  <span>13 September</span></a></div>显然，有很多方法可以通过 CSS 动画来做到这一点，但我从未在开发中使用过它。

Answer 1

不需要animation为此使用。transition只需添加transition: width .4s ease;到:after未悬停的元素并使用width属性就足够了

div .footer-text{

    position: absolute;

    top: 10%;

    left: 3%;

    height: 20px;

    width: 85%;

}

div .footer-text span{

    position: relative;

    top:-5px;

    font-size: 12px;

    color: #313B78;

    display: inline-block;

}

div .footer-text:after{

    content: '';

    background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat right;

    width: 130px;

    height: 15px;

    display: inline-block;

    margin-left: 10px;

    position: relative;

    transition: width .4s ease;

}

div:hover .footer-text:after{

    width: 0;

}

div .footer-text:before{

    content: '';

    background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat right;

    width: 0;

    height: 15px;

    margin-right: 5px;

    display: inline-block;

    transition: width .4s ease;

}

div:hover .footer-text:before{

    width: 130px;

}

<div>

<a href="" class='footer-text'>

  <span>13 September</span>

</a>

</div>

Answer 2

@keyframes left_to_right {

  from {

    margin-left: -15px;

  }

  to {

    margin-left: 0;

  }

}

div .footer-text {

  position: absolute;

  top: 10%;

  left: 3%;

  height: 20px;

  width: 85%;

}

div .footer-text:after {

  content: '';

  background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;

  width: 130px;

  height: 15px;

  display: inline-block;

  margin-left: 10px;

  position: relative;

  animation: left_to_right 0.4s ease;

}

div:hover .footer-text:before {

  content: '';

  background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;

  width: 130px;

  height: 15px;

  margin-right: 5px;

  display: inline-block;

  animation: left_to_right 0.4s ease;

}

div:hover .footer-text:after {

  display: none;

}

div .footer-text span {

  position: relative;

  top: -5px;

  font-size: 12px;

  color: #313B78;

  display: inline-block;

}

<div>

  <a href="" class='footer-text'>

    <span>13 September</span>

  </a>

</div>

Answer 3

我这样做:)

div {

  width:50%;

  position: relative;

  height: 20px;

}

div .footer-text{

    position: absolute;

    top: 0;

    left: 0;

    line-height: 20px;

    width: 100%;

    height: 100%;

    font-family: sans-serif;

    overflow: hidden;

}

div .footer-text:before {

  content: '';

  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%228%22%20height%3D%2215%22%20viewBox%3D%220%200%208%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201.5l6%206-6%206%22%20stroke%3D%22%23C5C8D0%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;

  background-size: 8px;

  width: 8px;

  height: 15px;

  position: absolute;

  right: 0;

  top: 50%;

  transform: translate(0,-7px);

  z-index: 2;

  transition: .4s ease-in-out;

}

div .footer-text span {

    position: absolute;

    top: 0;

    left: 0;

    font-size: 12px;

    color: #313B78;

    display: block;

    white-space: nowrap;

    z-index: 1;

    transition: .4s ease-in-out;

}

div .footer-text span:before {

    content: '';

    display: block;

    width: 100vw;

    height: 15px;

    position: absolute;

    top: 50%;

    right: 100%;

    margin: -7px 20px 0 0;

    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221110%22%20height%3D%2214%22%20viewBox%3D%220%200%201110%2014%22%3E%3Cpath%20fill%3D%22%23313B78%22%20d%3D%22M1109.424%206.076l-6-6a.599.599%200%2010-.848.848l4.975%204.976H1a.6.6%200%20100%201.2h1106.551l-4.975%204.976a.599.599%200%2010.848.848l6-6a.6.6%200%20000-.848z%22%2F%3E%3C%2Fsvg%3E') no-repeat right top;

    background-size: auto 14px;

}

div .footer-text span:after {

    content: '';

    display: block;

    width: 100vw;

    height: 1px;

    position: absolute;

    top: 50%;

    background: #C5C8D0;

    left: calc(100% + 20px);

}

div .footer-text:hover:before {

    transform: translate(20px,-7px);

}

div .footer-text:hover span {

    left: 100%;

    transform: translateX(-100%);

}

<div>

<a href="" class='footer-text'>

  <span>13 September</span>

</a>

</div>