CSS不透明アニメーション

Question

私のサイトには、CSSの不透明度でフェードインしたい3つのアイコンがあり、アニメーションが始まる前に隠しておきたいです。アイコンの可視性は最初から隠されている必要がありますが、どこで？ここで私が持っているコードは、これまでのところです：

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

はちょうどあなたの.iconクラスにopacity: 0を追加します。

アイコンをアニメーションの後に表示するには、の.iconクラスのプロパティも定義します。

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