css - CSS 样式链接

Question

是否可以对我的所有三个 div 使用一种样式以使其简短而简单，并保持动画正常工作？任何帮助深表感谢。

jsFiddle

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>