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等等，基本上所以元素了。

相關推薦：

CSS動畫之Tranistion_html/css_WEB-ITnose

css動畫製作－CSS animate

以上是css中動畫屬性的實作方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！