Question

是否可以为我的所有三个div使用一种样式，使其简洁明了，并保持动画的有效性？非常感谢任何帮助。

Answer 1

你的意思是将css应用于所有三个元素吗？如果是这样，你只需要这样做：

.a, .b, .c {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
}
.a {animation-delay: 1s;
  animation: fade 1s forwards;}
.b {animation-delay: 2s;
  animation: fade 2s forwards;}
.c {animation-delay: 3s;
  animation: fade 3s forwards;}
@keyframes fade {
0%   {opacity:0;}
50%   {opacity:1;}
100% {opacity:0;}}

Answer 2

可能是这样的jsFiddle：

.a {
  animation-delay: 1s;
  animation: fade 1s forwards;}


.b {
  animation-delay: 2s;
  animation: fade 2s forwards;}


.c {
  animation-delay: 3s;
  animation: fade 3s forwards;}

.d{
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;}

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

然后你的HTML看起来像这样：

<div class="a d"></div>
<div class="b d"></div>
<div class="c d"></div>

Answer 3

我对此表示怀疑，因为你的动画属性都不同，所以他们需要不同的类。但你可以通过在他们自己的类中保留所有常见属性来缩短你的CSS，如下所示：

.x {
  width: 15px;
  height: 15px;
  background: #dbdbdb;
  border-radius: 50px;
  display: inline-block;
}

.a {

  animation-delay: 1s;
  animation: fade 1s forwards;
}


.b {
  animation-delay: 2s;
  animation: fade 2s forwards;
}


.c {
  animation-delay: 3s;
  animation: fade 3s forwards;
}

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

像这样使用：

<div class="x a"></div>
<div class="x b"></div>
<div class="x c"></div>

CSS样式链接

3 个答案: