是的，你可以用CSS3动画（check browser support here）来做。
这是一个简单的demo for text-fading。
超文本标记语言：

.text {
        position:relative;
        line-height:2em;
        overflow:hidden;
    }
    .fadingEffect {
        position:absolute;
        top:0; bottom:0; right:0;
        width:100%;
        background:white;
        -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
        -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
        -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
        -o-animation: showHide 5s ease-in alternate infinite; /* Opera */
        animation: showHide 5s ease-in alternate infinite;
    }
    @-webkit-keyframes showHide { /* Chrome, Safari */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-moz-keyframes showHide { /* FF */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-ms-keyframes showHide { /* IE10 */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @-o-keyframes showHide { /* Opera */
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }
    @keyframes showHide {
        0% {width:100%}
        40% {width:0%}
        60% {width:0%;}
        100% {width:100%;}
    }

<div class="text">
    There is some text here!
    <div class="fadingEffect"></div>
 </div>

CSS：
正如你所看到的，在边界上有一个鲜明的对比。如果你使用图像渐变而不是纯白色背景，渲染效果会更好。
然后，您可以在IE9及以下版本中使用jQuery回退。

在photoshop或其他图像编辑软件中，创建一个圆形区域，该区域中间透明，所有侧面淡出为纯白色。根据需要随意裁剪顶部/底部。然后你可以使用css transitions从左到右动画化图形，以达到演示中的效果。对于像IE这样不支持过渡的浏览器，可以使用jQuery中的cssHooks功能来执行jQuery的动画。
你可以使用css渐变来创建这种效果，但是你会遇到浏览器支持的问题，而且在css渐变上使用transitions在性能上非常糟糕。然而，简单地动画一个png 24是非常容易的，并作出相同的效果。

我发现一个插件，其中包含多个文本动画.
https://tobiasahlin.com/moving-letters/
演示：https://jsfiddle.net/Danzoftw/hp8qL1e3/7/

var textWrapper = document.querySelector('.demo');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.demo .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: (el, i) => 150 * (i+1)
  }).add({
    targets: '.demo',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<h1 class="demo">Text animation demo</h1>

希望这对其他人有帮助。干杯

可用于任何背景的淡入文本-纯CSS

最受欢迎的anwser不适用于任何背景（如图像），因为它创建了一个可见的覆盖元素。
此示例适用于任何背景（在Firefox，Chrome和Edge上测试）。

.fade-in-text {
  animation: left-to-right-fade-in 1s ease-in;
  -webkit-mask-repeat: no-repeat;
}

@keyframes left-to-right-fade-in {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
  100% {
    -webkit-mask-size: 100%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
}

<span class="fade-in-text">This is a text that fades in from left to right</span>