方法：1、用“@keyframes 名稱{99%{opacity:1;}100%{opacity:0;}}”語句設置元素消失動畫；2、用“元素{animation-duration:時間}”語句設置動畫元素的動畫時間，時間過后元素就會消失。

成都創(chuàng)新互聯(lián)專注于廣河網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供廣河營銷型網站建設，廣河網站制作、廣河網頁設計、廣河網站官網定制、小程序設計服務，打造廣河網絡公司原創(chuàng)品牌,更為您提供廣河網站排名全網營銷落地服務。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3怎樣實現(xiàn)過幾秒消失動畫

在css中，想要實現(xiàn)過幾秒消失的動畫，需要利用animation屬性和@keyframes 規(guī)則來實現(xiàn)圖片出現(xiàn)幾秒后消失效果，通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。

創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規(guī)定改變發(fā)生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間。為了獲得的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

通過使用opacity屬性來控制元素消失樣式。

示例如下：

輸出結果：

（學習視頻分享：css視頻教程）