Question

我正在尝试找到一种方法，使文本在加载时淡入，并在几秒钟后使用CSS淡出。我搜索过S.O和谷歌，但我找不到那样的东西。基本上，文本在加载时淡入，然后在几秒钟内立即淡出。例如，我可以有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：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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/

Answer 3

你几乎拥有它。你的关键帧应该是这样的。

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

保持淡出。您需要将opacity: 0;添加到.text课程中。这是一个小提琴演示供您查看。 http://jsfiddle.net/Lk895rsa/1/

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

也可以只使用一个动画;但是，如果你想要两秒淡入和淡出4秒，那么你的动画断点应该在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;
}

使用CSS3淡出？

4 个答案: