這篇文章主要介紹css中動畫屬性如何使用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯公司是專業的海林網站建設公司，海林接單;提供成都做網站、成都網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行海林網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

一、css動畫（animation）屬性可以逐漸地從一個值變化到另一個值，比如尺寸大小、數量、百分比、位置和顏色。

二、實現方法：

1.定義動畫(slideOut為自定義的動畫名稱)

@-webkit-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}

2、調用動畫

-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;
	animation: slideOut 0.5s ease-in-out 0.3s backwards;

三、動畫用到的屬性有background/border/border/box-shadow/clip/color/column/filter/flex/font/letter-spacing/line-height/margin/opacity/outline/perspective/text/vertical-align/visibility/word-spacing/z-index等等，基本上所以元素了。

以上是css中動畫屬性如何使用的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯網站制作公司行業資訊頻道！

分享標題：css中動畫屬性如何使用-創新互聯
URL網址：http://newbst.com/article0/doooio.html

成都網站建設公司_創新互聯，為您提供標簽優化、網站營銷、網站設計、響應式網站、網站維護、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯