☰

CSS トランジション: 背景色をフェードアウト、質問後にリセット

tag-icon • tag-icon html css
CSS トランジション: 背景色をフェードアウト、質問後にリセット

div のリストがあり、ユーザーが新しいコンテンツを投稿することで動的に新しい div を追加できるようにしています。ユーザーが新しいコンテンツを投稿すると、新しい div の背景色を別の色にフェードアウトし、フェードアウトして画面上で強調表示したいと思います。かなり近いです:

http://jsfiddle.net/pUeue/1953/

トランジションをトリガーするためにこの CSS を使用しています:

.backgroundAnimated{
    background-color: #AD310B !important;
    background-image:none !important;
   -webkit-transition: background-color 5000ms linear;
   -moz-transition: background-color 5000ms linear;
   -o-transition: background-color 5000ms linear;
   -ms-transition: background-color 5000ms linear;
    transition: background-color 5000ms linear;
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-iteration-count: 2;
 }

他の色にフェードすることはできますが、フェードバックしません。これを実現するための提案はありますでしょうか? これを行う方法はたくさんあることは承知していますが、これを完全に CSS に含めることを望んでいました (jQuery を介して CSS クラスを動的に追加することを除く)。

ご提案がありましたら、よろしくお願いいたします。

ベストアンサー1

アニメーション キーフレームを利用できます。追加の JavaScript は必要ありません。

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
});
@-o-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}

.backgroundAnimated{    
    background-image:none !important; 
         -o-animation: fadeIt 5s ease-in-out; 
            animation: fadeIt 5s ease-in-out; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>

<input type="button" value="test" />

おすすめ記事