純粋なCSSを使用して、1つの要素の背景と色のプロパティのアニメーションを表示するにはどうすればよいですか？

Question

は、私はそれがこれを行うことは可能ですかどうかを確認したい：

$('.hello').addClass('hint-auto-fade'); 

私はクラス.hint-auto-fadeが.hello要素に#f00の#ffeの背景や色を追加し、5秒または10秒で消えていくようなものになることを願って。要素は、元の背景/色プロパティ（存在する場合）に戻ります。

おかげ

Answer 1

このような何か作業をする必要があります：

$('.hello').addClass('hint-auto-fade');

.hello { 
 
    color: blue; 
 
} 
 

 
.hint-auto-fade { 
 
    animation: autoFade 5s linear; 
 
} 
 

 
@keyframes autoFade { 
 
    from { 
 
    background: #ffe; 
 
    color: #f00; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="hello"> 
 
    Hello 
 
</div> 
 

 
<hr> 
 

 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="hello">Phasellus consequat gravida arcu vulputate rutrum. Phasellus efficitur ante ac quam dapibus mollis.</span> Donec libero quam, sollicitudin in semper sed, interdum at nulla. 
 
</p>