如何使用純CSS來顯示一個元素的背景和顏色屬性的動畫？

Question

我想看看是否有可能做到這一點：

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

我希望類.hint-auto-fade可以像添加#f00的#ffe背景和顏色的.hello元素，並在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>