使用CSS3实现淡入淡出效果？

Question

我正在寻找一种使用CSS在加载时淡入并在几秒钟后淡出的文本的方法。我已经在S.O和Google上搜索过，但找不到像这样的东西。基本上，文本在加载时淡入，然后在几秒钟内立即淡出。例如，我可以设置2秒淡入和4秒淡出。

以下是我用于淡入的代码：

.text { 
     -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

 @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

现在我正在尝试让文本在淡入后立即发生淡出。这在CSS中是否可能？

谢谢

- nTuply

Answer 1

您只需要在您的@keyframes 中添加一个百分比即可：

.text {
    /* fade in */
    -webkit-animation: fadeinout 4s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeinout 4s;
    /* Firefox < 16 */
    -ms-animation: fadeinout 4s;
    /* Internet Explorer */
    -o-animation: fadeinout 4s;
    /* Opera < 12.1 */
    animation: fadeinout 4s;
}
@keyframes fadeinout {
    from {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

为了实现您所要求的功能，首先需要将opacity: 0;进行设置，如下所示，并调整到6s：

        .text {
          opacity: 0;
          /* fade in */
          -webkit-animation: fadeinout 6s;
          /* Safari, Chrome and Opera > 12.1 */
          -moz-animation: fadeinout 6s;
          /* Firefox < 16 */
          -ms-animation: fadeinout 6s;
          /* Internet Explorer */
          -o-animation: fadeinout 6s;
          /* Opera < 12.1 */
          animation: fadeinout 6s;
        }

        @keyframes fadeinout {
          from {
            opacity: 0;
          }
          33% {
            opacity: 1;
          }

          to {
            opacity: 0;
          }
        }

<p class="text">faded</p>

这样文字在淡出后会保持隐藏状态。

http://jsfiddle.net/ryanpcmcquen/hhaLn42o/

- ryanpcmcquen

Answer 2

您可以使用百分比表示法，并将默认不透明度保持为0。

label{
    opacity: 0;
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 4s; /* Firefox < 16 */
        -ms-animation: fadein 4s; /* Internet Explorer */
         -o-animation: fadein 4s; /* Opera < 12.1 */
            animation: fadein 4s;
}

 @keyframes fadein {
    0% { opacity: 0; }
    50%   { opacity: 1; }
     100% {opacity: 0;}
}

演示代码-http://jsfiddle.net/cp8yjdcj/

- Amit.rk3

Answer 3

你差一点就做对了。你的关键帧应该是这样的。

 @keyframes fadein {
   0% { opacity: 0; }
   50%   { opacity: 1; }
   100% { opacity: 0; }
}

要保持淡化效果，你需要将 opacity: 0; 添加到你的.text类。这里有一个 jsfiddle 演示供你参考。http://jsfiddle.net/Lk895rsa/1/

- Chris Yongchu

Answer 4

也许更好的方法是创建两个动画并将它们应用于同一个元素，第二个动画延迟第一个动画运行的时间。

示例：http://jsfiddle.net/r5huo3zn/。

CSS:

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

.fadeInOut {
    opacity: 0;
    animation: fadeIn 2s linear, fadeOut 4s linear 2s forwards;
}

也可以只使用一个动画；但是，如果您想要两秒的淡入和四秒的淡出，则您的动画断点应该在6秒运行时间内为0％、33％和100％。

示例：http://jsfiddle.net/9vqccjg1/。

CSS：

@keyframes fadeInOut {
    0% {
        opacity: 0;   
    }

    33% {
        opacity: 1;    
    }

    100% {
        opacity: 0;
    }
}

.fadeInOut {
    animation: fadeInOut 6s linear;
    animation-fill-mode: forwards;
}

- DRD