一、css动画（animation）属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比、位置和颜色。

 

　　二、实现方法：

 

　　1.定义动画(slideOut为自定义的动画名称)

 

　　

 

　　@-webkit-keyframesslideOut{

 

　　0%{top:-30px;opacity:0;}

 

　　100%{top:0px;opacity:1;}

 

　　}

 

　　@-moz-keyframesslideOut{

 

　　0%{top:-30px;opacity:0;}

 

　　100%{top:0px;opacity:1;}

 

　　}

 

　　@-o-keyframesslideOut{

 

　　0%{top:-30px;opacity:0;}

 

　　100%{top:0px;opacity:1;}

 

　　}

 

　　@-ms-keyframesslideOut{

 

　　0%{top:-30px;opacity:0;}

 

　　100%{top:0px;opacity:1;}

 

　　}

 

　　@keyframesslideOut{

 

　　0%{top:-30px;opacity:0;}

 

　　100%{top:0px;opacity:1;}

 

　　}

 

　　2、调用动画

 

　　-webkit-animation:slideOut0.5sease-in-out0.3sbackwards;

 

　　-moz-animation:slideOut0.5sease-in-out0.3sbackwards;

 

　　-o-animation:slideOut0.5sease-in-out0.3sbackwards;

 

　　-ms-animation:slideOut0.5sease-in-out0.3sbackwards;

 

　　animation:slideOut0.5sease-in-out0.3sbackwards;

 

　　三、动画用到的属性有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等等，基本上所以元素了。






本文转载自中文网