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>