用CSS3淡入？

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：

 .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/

Answer 2

您可以使用百分比denotion，並保持默認的不透明度爲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;} 
} 

小提琴人口統計學

Answer 3

你幾乎擁有了。你的關鍵幀應該是這樣的。

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

保持淡出。您需要在您的.text課程中添加opacity: 0;。這是一個小提琴演示，供您查看。 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; 
} 

也可以只使用一個動畫;但是，如果您希望淡入淡出2秒，淡出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; 
}