和往常一樣，一邊喝早茶，一邊上網和女粉絲侃大山，在手機和平板電腦上整理修改《Html５》、《JavaScript》、《Css3》、《Dos》、《C++》、《框架師》等多年前寫的教程，並研究學習各種品牌的小程序。
突然女粉絲問：「陳老師，會設計Div背景色動畫嗎？」。
我答：「會的！」。
女粉絲問：「陳老師可以教我嗎？」。
我答：「好的~!」,下面我就教大家Div背景色動畫
Html5語言混合Css3語言
實現Div背景色動畫
小程序試驗
準備一個Html5標準框架做試驗用，如Html5標準框架
<!DOCTYPE html><html><head></head><body></body></html>（html5基礎框架）
設計一個chenjie類，控制寬、高、動畫播放時間，如Css代碼1。
.chenjie{width:100px;height:100px;animation:chenjie 8s;}（Css代碼1）
設計一個chenjie動畫，控制背景色由黃色變到綠色，如Css代碼2。
@keyframes chenjie{from {background:#FFED00;}to {background:#49FF00;}}（Css代碼2）
設計div調用chenjie類，如Html代碼1。
div class="chenjie"></div>（Html代碼1）
把Css代碼1~2和Html代碼1移植嵌入到Html5基礎框架中，如混合代碼小程序1
<!DOCTYPE html><html><head><meta charset="utf-8"><title>微信公眾號:design-Rabbit_Div背景色動畫</title><style> .chenjie{width:100px;height:100px;animation:chenjie 8s;}
@keyframes chenjie{from {background:#FFED00;}to {background:#49FF00;}}</style></head><body><div class="chenjie"></div></body></html>運行混合代碼小程序1，就可以看到圖1的效果，如果還不會運行方法，可以看我以前寫的Html5，學習代碼運行方法。
註：看到圖1頁面中字體顯示亂馬時charset="GB2312"可以改成charset="utf-8"或改為其它的編碼方式。圖1中就是Div背景色動畫試驗，看到Div背景色由黃色變綠色這個效果本次試驗就成功了。好！傑哥Html5混合Css3動畫師學習筆記分享到這裡，要知後事如何請關注、分享、收藏我的微信公眾號，如果喜歡請打賞。微信公眾號:design-Rabbit