CSS不透明度動畫

Question

我在我的網站上有3個圖標，我想用CSS不透明度淡入淡出，我希望它們在動畫開始前隱藏。圖標的可見性需要從頭開始隱藏，但是在哪裏？這裏是我的代碼至今：

/* Animation keyframes for icons below carousel */ 
@-moz-keyframes icon-move { 
0% {opacity: 0;} 
25% {opacity: 0.2;} 
50% {opacity: 0.4;} 
75% {opacity: 0.6;} 
100% {opacity: 1;} 
} 
@-webkit-keyframes icon-move { 
0% {opacity: 0;} 
25% {opacity: 0.2;} 
50% {opacity: 0.4;} 
75% {opacity: 0.6;} 
100% {opacity: 1;} 
} 
@keyframes icon-move { 
0% {opacity: 0;} 
25% {opacity: 0.2;} 
50% {opacity: 0.4;} 
75% {opacity: 0.6;} 
100% {opacity: 1;} 
} 
.icon { 
-webkit-animation-name: icon-move; 
-ms-animation-duration: 10s; 
animation-duration: 10s; 
-webkit-animation-delay: 3s; 
-moz-animation-delay: 3s; 
-ms-animation-delay: 3s; 
    animation-delay: 3s; 
-webkit-animation-iteration-count: 2; 
-moz-animation-iteration-count: 2; 
-ms-animation-iteration-count: 2; 
animation-iteration-count: 2; 
} 

Answer 1

只需添加opacity: 0您.icon類。

爲了使您的圖標在動畫之後保持可見狀態，請在.icon類中定義以下屬性：animation-fill-mode: forwards;。

Answer 2

/* Animation keyframes for icons below carousel */ 
@-moz-keyframes icon-fade { 
0% {opacity: 0.1;} 
25% {opacity: 0.3;} 
50% {opacity: 0.5;} 
75% {opacity: 0.8;} 
100% {opacity: 1;} 
} 
@-webkit-keyframes icon-fade { 
0% {opacity: 0.1;} 
25% {opacity: 0.3;} 
50% {opacity: 0.5;} 
75% {opacity: 0.8;} 
100% {opacity: 1;} 
} 
@keyframes icon-fade { 
0% {opacity: 0.1;} 
25% {opacity: 0.3;} 
50% {opacity: 0.5;} 
75% {opacity: 0.8;} 
100% {opacity: 1;} 
} 
.icon { 
opacity: 0; 
-webkit-animation-name: icon-fade; 
-moz-animation-name: icon-fade; 
animation-name: icon-fade; 
-webkit-animation-duration: 15s; 
-moz-animation-duration: 15s; 
animation-duration: 15s; 
-webkit-animation-delay: 1s; 
-moz-animation-delay: 1s; 
animation-delay: 1s; 
-webkit-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards; 
animation-fill-mode: forwards; 
-webkit-animation-iteration-count: 1; 
-moz-animation-iteration-count: 1; 
animation-iteration-count: 1; 
}