CSSを使用した2つの別々のバウンス矢印

Question

CSSを使用して2つの矢印を別々の方向に「バウンス」させる方法はありますか？

私のサイト（左上隅に表示されることがあります）に1つのバウンシング矢印を生成する私のサイト（domainmarket.io）に次のコードがありますが、別の方向にバウンスしたい方法を見つけ出す。

HTML

<div class="arrow bounce"></div> 

<div class="topbarleft"> 
<a href="javascript:showhide('uniquename')"> 
<p><?php echo wp_kses_post($ocin_topbar_text); ?></p> 
</a> 

<div class="rightarrow bounceright"></div> 

</div> 

CSS

@-webkit-keyframes bounce{ 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    40% { 
    -webkit-transform: translateX(-30px); 
    transform: translateX(-30px); 
    } 
    60% { 
    -webkit-transform: translateX(-15px); 
    transform: translateX(-15px); 
    } 
} 

@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    transform: translateX(0); 
    } 
    40% { 
    transform: translateX(-30px); 
    } 
    60% { 
    transform: translateX(-15px); 
    } 
} 

@keyframes bounce{ 
    0%, 20%, 50%, 80%, 100% { 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
    40% { 
    -ms-transform: translateX(-30px); 
    transform: translateX(-30px); 
    } 
    60% { 
    -ms-transform: translateX(-15px); 
    transform: translateX(-15px); 
    } 
} 





@-webkit-keyframes bounceright { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    40% { 
    -webkit-transform: translateX(30px)!important; 
    transform: translateX(30px)!important; 
    } 
    60% { 
    -webkit-transform: translateX(15px)!important; 
    transform: translateX(15px)!important; 
    } 
} 

@-moz-keyframes bounceright { 
    0%, 20%, 50%, 80%, 100% { 
    transform: translateX(0); 
    } 
    40% { 
    transform: translateX(30px)!important; 
    } 
    60% { 
    transform: translateX(15px)!important; 
    } 
} 

@keyframes bounceright { 
    0%, 20%, 50%, 80%, 100% { 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
    40% { 
    -ms-transform: translateX(30px) !important; 
    transform: translateX(30px)!important; 
    } 
    60% { 
    -ms-transform: translateX(15px)!important; 
    transform: translateX(15px)!important; 
    } 
} 




.arrow { 

    margin-top:0px; 
    width: 24px; 
    height: 24px; 
    float: left; 
    margin-right: 10px; 
    background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrow-1.png'); 
    background-repeat: no-repeat; 

} 

.bounce { 
    -webkit-animation: bounce 2s infinite; 
    animation: bounce 2s infinite; 
}  

.bounceright { 
    -webkit-animation: bounce 2s infinite; 
    animation: bounce 2s infinite; 
} 

.rightarrow.bounceright { 
    background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrowright.png'); 
    background-repeat: no-repeat; 
    float: left; 
    width: 24px; 
    height: 24px; 
    display: inline-block; 
} 

あなたは私のCSSコードで見ることができるように、私はそれがうまくいくかどうかを確認するためにbouncerightする@keyframesを変更しようとしたが、それはhasn 't。

Answer 1

何とか、バウンスライトキーフレームに!importantを追加すると、無効になっています。それを取り外すと動作します。

！importantでマークされた@keyframesの宣言は無視されます。ここを参照してください：https://developer.mozilla.org/en/docs/Web/CSS/@keyframes#!important_in_a_keyframe

だからここには、最終的な結果である：

@keyframes bounceright { 
    0%, 20%, 50%, 80%, 100% { 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
    40% { 
    -ms-transform: translateX(30px); 
    transform: translateX(30px) 
    } 
    60% { 
    -ms-transform: translateX(15px); 
    transform: translateX(15px); 
    } 
} 

編集：

：また、質問の著者として .bounceright CSSルールで「bounceright」で、変更「バウンス」説明しました

.bounceright { 
    -webkit-animation: bounceright 2s infinite; 
    animation: bounceright 2s infinite; 
} 

しかし、私は他の矢印と別のクラスを使用するのではなく、同じものを使うだけで、もっと簡単な解決策を見つけました。だから、代わりに：CSSルールと

<div class="rightarrow bounceright"></div> 

使用

<div class="reverse"><div class="arrow bounce"></div></div> 

を：

.reverse { 
    transform: rotate(180deg); 
    display:inline-block; 
} 

この方法だけ矢印の方向を逆に同じコードのない重複はありません。

Answer 2

わかった！ CSSファイル

.bounceright { 
    -webkit-animation: bounce 2s infinite; 
    animation: bounce 2s infinite; 
} 

で

は私が！重要な条項を削除しようとした

.bounceright { 
    -webkit-animation: bounceright 2s infinite; 
    animation: bounceright 2s infinite; 
}