CSS动画展开宽度从0到100隐藏从0到100

Question

我试图弄清楚这个网页上的事情是如何完成的 hover effect on projects。如您所见，悬停从右到左显示并从同一方向隐藏。我正在努力实现这种效果。这就是我到目前为止所做的：

HTML
<div class="text">Simple text</div>
<div class="img"></div>

SCSS
$square-color: #FF4136;

.text{
  position: absolute;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.img{
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 75px;
  height: 100%;
  background-color: $square-color;
  // visibility: hidden;
  opacity: 0;

  &.fade-in{
    animation: .5s linear fadein forwards;
  }

  &.fade-out{
    animation: .5s linear fadeout forwards alternate;
  }

}

@keyframes fadein {
  from{
    opacity: 0;
    width: 0px;
  }
  to{
    opacity: 1;
    width: 75px;
  }
}

@keyframes fadeout{
  from{
    opacity: 1;
    width: 75px;
    transform-origin: left;
  }
  to{
    opacity: 0;
    width: 0px;
  }
}
JS
const txt = document.querySelector('.text');
const img = document.querySelector('.img');

txt.addEventListener('mouseover', function() {
  img.classList.remove('fade-out');
  img.classList.add('fade-in');
})

txt.addEventListener('mouseout', function(){
  img.classList.remove('fade-in');
  img.classList.add('fade-out');
})

感谢您的帮助和任何提示！

Answer 1

Here is the general demo for what you need simple by using left and right properties

.underline {
  display: inline;
  position: relative;
  overflow: hidden;
}
.underline:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  width: 0;
  bottom: -5px;
  background: #000;
  height: 4px;
  transition-property: width;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
  left: 0;
  right: auto;
  width: 100%;
}

<p>hello, <a href="#" class="underline">Please animate</a>
</p>

CSS动画展开宽度从0到100隐藏从0到100

CSS animation expand width from 0 to 100 and hide from 0 to 100

html

css

animation

hover