amazeui学习笔记--css（常用组件15）--CSS动画Animation

一、总结

1、css3动画封装：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	无限旋转

2、基本使用（这个好）： <div class="am-animation-fade">...</div>

3、一直旋转的icon：<span class="am-icon-cog am-animation-spin"></span>

4、反向动画：添加 .am-animation-reverse class，让动画反向运行（通过把  设置为 reverse 实现）。

     
      ...
     

5、动画延迟执行：添加以下 class 可以使动画延迟 1-6s 执行。

• .am-animation-delay-1
• .am-animation-delay-2
• .am-animation-delay-3
• .am-animation-delay-4
• .am-animation-delay-5
• .am-animation-delay-6

自定义延时：

.my-animation-delay {  -webkit-animation-delay: 15s;  animation-delay: 15s;}

延迟 1s 执行

 

 

 

 

 

二、CSS动画Animation

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	无限旋转

使用演示

点击按钮查看动画效果。

默认效果

 Copy

Fade

Scale Up

Scale Down

Slide Top

Slide Bottom

Slide Left

Slide Right

Shake

     
      ...
     
 

反向动画

添加 .am-animation-reverse class，让动画反向运行（通过把  设置为 reverse 实现）。

 Copy

Fade

Scale Up

Scale Down

Slide Top

Slide Bottom

Slide Left

Slide Right

Shake

     
      ...
     
 

动画延迟执行

添加以下 class 可以使动画延迟 1-6s 执行。

• .am-animation-delay-1
• .am-animation-delay-2
• .am-animation-delay-3
• .am-animation-delay-4
• .am-animation-delay-5
• .am-animation-delay-6

自定义延时：

 Copy

.my-animation-delay {  -webkit-animation-delay: 15s;  animation-delay: 15s; }

 Copy

点击开始执行动画

---

没延迟的动画

延迟 1s 执行

延迟 2s 执行

延迟 3s 执行

延迟 4s 执行

延迟 5s 执行

延迟 6s 执行

点击开始执行动画 
     
 
     
 
      
没延迟的动画
 
      
延迟 1s 执行
 
      
延迟 2s 执行
 
      
延迟 3s 执行
 
      
延迟 4s 执行
 
      
延迟 5s 执行
 
      
延迟 6s 执行
 
     
 

参考资源