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班级。

为了让您的图标在动画后保持可见，请在animation-fill-mode: forwards;课程中定义以下属性：.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;
}

CSS不透明动画

2 个答案: