css中動畫屬性的實現方法（附代碼）

本篇文章給大家帶來的內容是關於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等等，基本上所以元素了。