使用CSS3淡出？

Question

我试图找到一种方法,使文本在加载时淡入淡出,并在几秒钟后使用CSS淡出.我搜索了SO和谷歌,但我找不到那样的东西.基本上,文本在加载时淡入,然后在几秒钟内立即淡出.例如,我可以有2s淡入和4s淡出.

这是我用于淡入的内容:

.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一起使用？

谢谢

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/