Question

我在css中为文本制作了fadein。代码是

.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秒而且淡出时像fadein一样（1s，2s fadeout并不重要）。我尝试了很多东西，但是我无法使它发挥作用。

请有人帮助。提前谢谢！

Answer 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; }}

Answer 2

会是这样吗？

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

<h1 class="text">Hello!</h1>

如何在css中制作淡出文本

2 个答案: