CSS 从左到右淡入淡出答案

【问题标题】：CSS fade left to rightCSS 从左到右淡入淡出
【发布时间】：2012-09-23 02:19:32
【问题描述】：

有没有办法仅使用 CSS 将元素（至少只是文本）从左到右淡入淡出，反之亦然？

这是我的意思的一个例子：

实际上，如果它需要 jQuery，我也会接受，只是作为第二优先级。

【问题讨论】：

您可以使用一个额外的图层来保持渐变（从白色到透明）并水平移动该图层以获得所需的效果。
@feeela 这就是我认为可能效果最好的方法，但我不确定如何实现上面的效果，因为图层只会返回而不是继续朝同一个方向移动。
在文本上方放置一个图层并为渐变设置动画？这可以工作，但是我已经很久没有使用 CSS3 渐变了。
如果有的话，它只是 Geuis 所说的 PNG，而不是 CSS3 渐变。我可以很容易地做到这一点，但诀窍是使图层在鼠标移出时沿同一方向移动。除非...我只是将图层设置为下面带有反向渐变的精灵，并让它在悬停和鼠标移出时上下移动背景。
@Zeta 目前没有办法在 CSS3 中为渐变设置动画。也许在未来……

【解决方案1】：

在 Photoshop 或其他图像编辑软件中，创建一个中间透明的圆形区域，四周逐渐淡出为纯白色。根据需要随意裁剪顶部/底部。然后，您可以使用 css 过渡从左到右为图形设置动画，以实现演示中的效果。对于 IE 等不支持转场的浏览器，请使用 jquery 中的 cssHooks 功能来使用 jQuery 执行动画。

您可以使用 css 渐变创建此效果，但是会遇到浏览器支持问题，并且在 css 渐变上使用过渡在性能方面非常糟糕。但是，简单地为 png24 设置动画非常简单，并且可以产生相同的效果。

【讨论】：

【解决方案2】：

是的，您可以使用 CSS3 动画 (check browser support here)。

这是一个简单的demo for text-fading。

HTML：

.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 后备。

【讨论】：

不使用背景也能达到同样的效果吗？因为如果在图像上使用它，您将看到一个白色背景矩形。 THX
太棒了！谢谢

【解决方案3】：

我找到了一个包含多个文本动画的插件。

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>

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

【讨论】：