如何使用 CSS 创建从左侧淡入并在右侧结束的背景？

Question

我希望组件内容（背景和文本）使用不透明度或其他效果从左侧淡入。我希望它从左侧开始，淡入完全不透明，在右侧结束。然而，仅不透明度就会同时改变整个组件的背景。我怎样才能让它从左边开始并在右边结束？我正在制作一个 React 应用程序，并希望在重新渲染时产生效果。

我已经绑定使用translateY(10px)，但这会移动整个组件，并且我希望边框保持在原位。

.box{
  border: 3px solid #fff0f179;
  border-radius: 3px;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 44px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 44px;
  margin: 3px;
   font: 800 24px ;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px;
  animation: fadeBackground 5s ease;
}
@keyframes fadeBackground {

        /* 0% {opacity:0%}
        40% {opacity:40%}
        60% {opacity:60%;}
        100% {opacity:100%;} */

    0%{
         opacity: 0;
        transform: translateY(10px);
        background-color: white;
    }
    100%{
        opacity: 1;
          transform: translateY(0);
    }
}

怎样才能达到这样的效果？

Answer 1

.html

<div class="fade-in-div">
    Your content here
</div>

.css

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1a1a1a;
}

.fade-in-div {
  width: 50vw;
  height: 50vh;
  background: linear-gradient(to right, transparent 0%, #f1a22b 50%, transparent 100%);
  animation: fadeIn 5s forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #fff;
  border-radius: 10px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    background: linear-gradient(to right, transparent 0%, #f1a22b 0%, transparent 100%);
  }
  100% {
    opacity: 1;
    background: linear-gradient(to right, transparent 0%, #f1a22b 50%, transparent 100%);
  }
}

如果您希望每次 div 进入视口时都执行动画，请使用

framerMotion

或

getBoundingClientRect()