這篇文章帶給大家的內容是關於css中動畫屬性的實作方法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、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動畫之Tranistion_html/css_WEB-ITnose
以上是css中動畫屬性的實作方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
