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>