如何在css中制作淡出文本答案

【问题标题】：How to make fadeout text in css如何在css中制作淡出文本
【发布时间】：2015-10-02 02:20:38
【问题描述】：

我为 css 中的文本制作了淡入淡出。代码是

.text {
    -webkit-box-shadow: 0px 0px 5px #333;
    -moz-box-shadow: 0px 0px 5px #333;
    -ms-box-shadow: 0px 0px 5px #333;
    -o-box-shadow: 0px 0px 5px #333;
    box-shadow: 0px 0px 5px #333;
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

这段代码运行良好。但我希望文本出现时例如 2 秒，而不是像淡入淡出一样淡出（1s，2s 淡出无关紧要）。我尝试了很多东西，但我无法成功。

有人可以帮忙吗？提前致谢！

【问题讨论】：

你是这个意思吗？ stackoverflow.com/questions/16344354/…

标签： css css-animations

【解决方案1】：

您可以重新定义关键帧并更改百分比值以调整显示时间。

这是一个示例：http://jsfiddle.net/2H9CU/。

.text {
    -webkit-box-shadow: 0px 0px 5px #333;
    -moz-box-shadow: 0px 0px 5px #333;
    -ms-box-shadow: 0px 0px 5px #333;
    -o-box-shadow: 0px 0px 5px #333;
    box-shadow: 0px 0px 5px #333;
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
}

@-webkit-keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 0% { opacity: 0; }}
@-moz-keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 0% { opacity: 0; }}
@-o-keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; }     0% { opacity: 0; }}
@keyframes fadeIn { 0% { opacity: 0.0; } 25% { opacity: 1.0; } 75% { opacity: 1.0; } 0% { opacity: 0; }}

【讨论】：

您好，非常感谢您的回复！我只是添加您提供的代码。它像我想要的那样工作。但我在滑块中使用此文本。因此，当我在最后一个滑块结束并再次进入第一个滑块时，我只使用我的代码和 FadeIn 时，我的文本显示得很好。但是，当我的最后一个滑块结束并继续使用此代码时，第一个文本不再显示。有没有可能解决这个问题。我应该添加某种重复时间或其他东西。再次非常感谢您提供代码，但这是否可以修复？
没问题。您可以为此使用 javascript。每次加载幻灯片时重新启动动画。删除“.text”类并延迟再次阅读将起作用。 Here 是一个例子。

【解决方案2】：

会是这样吗？

.text {
  text-shadow: 0px 0px 5px #333;
  opacity: 1;
  transition: 1s;
}
.text:hover {
  transition: 2s;
  opacity: 0;
}

&lt;h1 class="text"&gt;Hello!&lt;/h1&gt;

【讨论】：