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{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 10%;&nbsp; &nbsp; left: 3%;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; width: 85%;}div .footer-text span{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top:-5px;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; color: #313B78;&nbsp; &nbsp; display: inline-block;}div .footer-text:after{&nbsp; &nbsp; content: '';&nbsp; &nbsp; background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat right;&nbsp; &nbsp; width: 130px;&nbsp; &nbsp; height: 15px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; margin-left: 10px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; transition: width .4s ease;}div:hover .footer-text:after{&nbsp; &nbsp; width: 0;}div .footer-text:before{&nbsp; &nbsp; content: '';&nbsp; &nbsp; background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat right;&nbsp; &nbsp; width: 0;&nbsp; &nbsp; height: 15px;&nbsp; &nbsp; margin-right: 5px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; transition: width .4s ease;}div:hover .footer-text:before{&nbsp; &nbsp; width: 130px;}<div><a href="" class='footer-text'>&nbsp; <span>13 September</span></a></div>

Answer 2

@keyframes left_to_right {&nbsp; from {&nbsp; &nbsp; margin-left: -15px;&nbsp; }&nbsp; to {&nbsp; &nbsp; margin-left: 0;&nbsp; }}div .footer-text {&nbsp; position: absolute;&nbsp; top: 10%;&nbsp; left: 3%;&nbsp; height: 20px;&nbsp; width: 85%;}div .footer-text:after {&nbsp; content: '';&nbsp; background: url('https://www.nsartmuseum.ru/images/test/arrow-after-3.png') no-repeat;&nbsp; width: 130px;&nbsp; height: 15px;&nbsp; display: inline-block;&nbsp; margin-left: 10px;&nbsp; position: relative;&nbsp; animation: left_to_right 0.4s ease;}div:hover .footer-text:before {&nbsp; content: '';&nbsp; background: url('https://www.nsartmuseum.ru/images/test/arrow-before-3.png') no-repeat;&nbsp; width: 130px;&nbsp; height: 15px;&nbsp; margin-right: 5px;&nbsp; display: inline-block;&nbsp; animation: left_to_right 0.4s ease;}div:hover .footer-text:after {&nbsp; display: none;}div .footer-text span {&nbsp; position: relative;&nbsp; top: -5px;&nbsp; font-size: 12px;&nbsp; color: #313B78;&nbsp; display: inline-block;}<div>&nbsp; <a href="" class='footer-text'>&nbsp; &nbsp; <span>13 September</span>&nbsp; </a></div>

Answer 3

我这样做:)div {&nbsp; width:50%;&nbsp; position: relative;&nbsp; height: 20px;}div .footer-text{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; line-height: 20px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; font-family: sans-serif;&nbsp; &nbsp; overflow: hidden;}div .footer-text:before {&nbsp; content: '';&nbsp; 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;&nbsp; background-size: 8px;&nbsp; width: 8px;&nbsp; height: 15px;&nbsp; position: absolute;&nbsp; right: 0;&nbsp; top: 50%;&nbsp; transform: translate(0,-7px);&nbsp; z-index: 2;&nbsp; transition: .4s ease-in-out;}div .footer-text span {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; color: #313B78;&nbsp; &nbsp; display: block;&nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; transition: .4s ease-in-out;}div .footer-text span:before {&nbsp; &nbsp; content: '';&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 15px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; right: 100%;&nbsp; &nbsp; margin: -7px 20px 0 0;&nbsp; &nbsp; 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;&nbsp; &nbsp; background-size: auto 14px;}div .footer-text span:after {&nbsp; &nbsp; content: '';&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 1px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; background: #C5C8D0;&nbsp; &nbsp; left: calc(100% + 20px);}div .footer-text:hover:before {&nbsp; &nbsp; transform: translate(20px,-7px);}div .footer-text:hover span {&nbsp; &nbsp; left: 100%;&nbsp; &nbsp; transform: translateX(-100%);}<div><a href="" class='footer-text'>&nbsp; <span>13 September</span></a></div>