覆蓋動畫持續時間與CSS類

Question

我想設計我的CSS文件中這樣說：

<h1 class="bounce">Bouncing Text</h1> 
<h1 class="bounce fast">Faster Bouncing Text</h1> 

我有CSS代碼看起來像這樣，但它似乎並不奏效：

.fast { 
    -webkit-animation-duration: 1s !important; 
    animation-duration: 1s !important; 
} 
.bounce { 
    -webkit-animation-name: bounce-animation; 
    animation-name: bounce-animation; 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 

「快速」類似乎實際上並沒有改變動畫持續時間。這兩個元素以相同的速度反彈。 無論如何要讓這個設計工作？由於

Answer 1

試試這個

.fast { 
    -webkit-animation-duration: 1s !important; 
    animation-duration: 1s !important; 
} 
.bounce { 
    position: relative; 
    -webkit-animation: bounce-animation 5s infinite; 
    animation: bounce-animation 5s infinite; 
    -webkit-animation-duration: 2s; 
} 
@-webkit-keyframes bounce-animation { 
    from {left: 0px;} 
    to {left: 200px;} 
} 

@keyframes bounce-animation { 
    from {left: 0px;} 
    to {left: 200px;} 
} 

http://jsfiddle.net/x8326n81/3/

Answer 2

我意識到，我正在申請動畫到::僞元素之後。爲了看到結果，我需要調整我快CSS：

.fast, 
.fast::after { 
    -webkit-animation-duration: 1s !important; 
    animation-duration: 1s !important; 
} 

Answer 3

display: block;將解決這個問題。 :)