如何在css中制作带有图标外观的平滑展开动画？

Question

我有这段代码，其中包含我网站上的特色博客文章部分。我制作了一个图标，当鼠标悬停在

.read-further

时会出现，但是它并没有真正使用 CSS 实现平滑的过渡动画。有没有办法来解决这个问题？或者这里需要 JavaScript 吗？这是完整的代码：

.read-further {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 0.50%;
  padding: 0.50%;
  width: fit-content;
  text-decoration: none;
  text-align: center;
  color: #ece5e0;
  background-color: #363945;
  border-radius: 44px;
  transition: all 0.25s ease-out;
  overflow: hidden;
  z-index: 1;
}

.read-further:hover {
  width: auto;
  background-color: #bb4b42;
  box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  -webkit-box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  -moz-box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
}

.read-further a {
  z-index: 1;
  display: inline-flex;
  align-self: center;
  justify-self: center;
  color: #ece5e0;
  text-decoration: none;
}

.read-further i {
  display: none;
  position: relative;
  color: #ece5e0;
  font-size: larger;
  left: 1.75%;
  visibility: hidden;
  z-index: 1;
}

.read-further:hover>i {
  visibility: visible;
  display: inline-flex;
  align-self: center;
  justify-self: center;
  -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="container">
  <section class="container-child">
    <a id="cc-tag" href="">Tech</a>
    <a href=""><img src="/img/example-image.png" alt="example"></a>
    <h3>Example Article</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error harum magni voluptate facilis, blanditiis quisquam</p>
    <div class="read-further">
      <a href="">Read more...</a>
      <i href="" class="bi bi-arrow-right"></i>
    </div>
  </section>
</div>

这是 JSFiddle 上的样子：

https://jsfiddle.net/exg24pqw/

提前致谢。

我尝试了各种方式“过渡”属性，但没有成功。

Answer 1

您的

transition: all .25s ease-out

不起作用的原因是因为

fit-content

和

auto

宽度，您可以在按钮未悬停时为按钮指定静态宽度。

auto

宽度使按钮完全适合其父级宽度，因此您可以使用

width:100%;

代替。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.read-further {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 0.50%;
  padding: 0.50%;
  width: 200px;
  text-decoration: none;
  text-align: center;
  color: #ece5e0;
  background-color: #363945;
  border-radius: 44px;
  overflow: hidden;
  /* z-index: 1; *//*z-index works when the element has a position*/
  transition: all .25s ease-out;
}

.read-further:hover {
  width: 100%;
  background-color: #bb4b42;
  box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  -webkit-box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  -moz-box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
}

.read-further a {
  z-index: 1;
  display: inline-flex;
  align-self: center;
  justify-self: center;
  color: #ece5e0;
  text-decoration: none;
}

.read-further i {
  display: none;
  position: relative;
  color: #ece5e0;
  font-size: larger;
  left: 1.75%;
  visibility: hidden;
  z-index: 1;
}

.read-further:hover>i {
  visibility: visible;
  display: inline-flex;
  align-self: center;
  justify-self: center;
  -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div class="container">
  <section class="container-child">
    <a id="cc-tag" href="">Tech</a>
    <a href=""><img src="/img/example-image.png" alt="example"></a>
    <h3>Example Article</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error harum magni     voluptate facilis, blanditiis quisquam</p>
    <div class="read-further">
      <a href="">Read more...</a>
      <i href="" class="bi bi-arrow-right"></i>
    </div>
  </section>
</div>

我希望这能解决您的问题！