Animation


CSS3 动画封装,浏览器需支持 CSS3 动画。

Class 描述
.am-animation-fade 淡入
.am-animation-scale-up 逐渐放大
.am-animation-scale-down 逐渐缩小
.am-animation-slide-top 顶部滑入
.am-animation-slide-bottom 底部滑入
.am-animation-slide-left 左侧滑入
.am-animation-slide-right 右侧滑入
.am-animation-shake 左右摇动
.am-animation-spin 无限旋转

点击按钮查看动画效果。

基本效果

<div class="am-animation-fade">...</div>

<span class="am-icon-cog am-animation-spin"></span>

反向动画

添加 .am-animation-reverse class,让动画反向运行(通过把 animation-direction 设置为 reverse 实现)。

<div class="am-animation-fade am-animation-reverse">...</div>

<span class="am-icon-cog am-animation-spin am-animation-reverse"></span>

参考资源