css div怎么渐变到透明

Question

下图所示：
右边这块是一个div，绝对定位到最顶层，白线是边框。
背景色我做了从透明到绿色的渐变。
现在我想要的效果是文字的部分也要相同的效果，其实不仅是文字，是整个div从透明到不透明的变化。

补充：

其实我想要的效果是，一个div，左边往右是从透明到不透明的渐变。。整个div里的元素做动画效果，往左滚动播放，这样，就有个内容渐隐的过程。

根据楼下提供的思路，文字可以，但是图片和div块就不行了。。

Answer 1

太久了，都忘了这个问题了，在这里补充下解决方法：
使用css的蒙版效果：

    
    body{
        background: pink;
    }
    .wraps{
        -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 60%); 
        background: #fff;
        width: 40%;
        height: 300px;
        border: 1px solid red;
    }

Answer 2

    <style>
      .box {
        width: 500px;
        height: 200px;
        background-image: linear-gradient(90deg,transparent,green);
      }

      .box div {
        background: linear-gradient(to right, transparent, #000);
        -webkit-background-clip: text;
        font-size: 14px;
        color: transparent;
        font-weight: bold;
      }
    </style>
    <div class="box">
      <div>右边这块是一个div，绝对定位到最顶层，白线是边框</div>
      <div>背景色我做了从透明到绿色的渐变</div>
      <div>现在我想要的效果是文字的部分也要相同的效果，其</div>
    </div>