css animate-框架-浙江爱信诺前端规范

框架 - CSS Animate

概述

常见动画效果的集合，主要用于效果演示和参考，可以自定义也可以直接调用。

代码展示（部分）

						@-webkit-keyframes bounce {
							0%, 20%, 50%, 80%, 100% { -webkit-transform:translateY(0); transform:translateY(0);}
							40% { -webkit-transform:translateY(-30px); transform:translateY(-30px);}
							60% { -webkit-transform:translateY(-15px); transform:translateY(-15px);}
						}
						@keyframes bounce {
							0%, 20%, 50%, 80%, 100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0);}
							40% { -webkit-transform:translateY(-30px); -ms-transform:translateY(-30px); transform:translateY(-30px);}
							60% { -webkit-transform:translateY(-15px); -ms-transform:translateY(-15px); transform:translateY(-15px);}
						}
						.ui-animate-bounce { -webkit-animation-name:bounce; animation-name:bounce;}

使用方法

直接下载animate.css并引入到页面中，因为很多动画用不到，也可以复制部分到样式表中

在元素上先挂上ui-animate类，然后再挂上相应动画的类

							/* 在base.css中已经定义了 */
							.ui-animate { -webkit-animation-duration:1s; -webkit-animation-fill-mode:both; animation-duration:1s; animation-fill-mode:both;}

							<div class="m-nav">
								<li class="ui-animate ui-animate-bounce"></li>
							</div>

动画列表