css - CSSスタイルのリンク

Question

3つのdivすべてに1つのスタイルを使用して、短くシンプルにし、アニメーションを機能させ続けることは可能ですか？どんな助けでも大歓迎です。

jsFiddle

Answer 1

css を 3 つの要素すべてに適用するということですか? もしそうなら、これを行うだけです：

.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>