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

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，让动画反向运行（通过把 animation-direction 设置为 reverse 实现）。

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

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

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;
}

<p><button type="button" class="am-btn am-btn-primary am-animation-delay-1">延迟 1s 执行</button></p>

 

 

 

 

 

二、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

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

反向动画

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

 Copy

Fade

Scale Up

Scale Down

Slide Top

Slide Bottom

Slide Left

Slide Right

Shake

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

动画延迟执行

添加以下 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 执行

<button id="animation-start" type="button" class="am-btn am-btn-danger">点击开始执行动画</button> <hr/> <div id="animation-group"> <p><button type="button" class="am-btn am-btn-primary">没延迟的动画</button></p> <p><button type="button" class="am-btn am-btn-primary am-animation-delay-1">延迟 1s 执行</button></p> <p><button type="button" class="am-btn am-btn-secondary am-animation-delay-2">延迟 2s 执行</button></p> <p><button type="button" class="am-btn am-btn-success am-animation-delay-3">延迟 3s 执行</button></p> <p><button type="button" class="am-btn am-btn-warning am-animation-delay-4">延迟 4s 执行</button></p> <p><button type="button" class="am-btn am-btn-danger am-animation-delay-5">延迟 5s 执行</button></p> <p><button type="button" class="am-btn am-btn-primary am-animation-delay-6">延迟 6s 执行</button></p> </div> <script> $(function() { var $btns = $('#animation-group').find('.am-btn'); var dfds = []; var animating = false; var animation = 'am-animation-scale-up'; $('#animation-start').on('click', function() { if (!animating) { animating = true; $btns.each(function() { var dfd = new $.Deferred(); dfds.push(dfd); var $this = $(this); if ($.AMUI.support.animation) { $this.addClass(animation).one($.AMUI.support.animation.end, function() { $this.removeClass(animation); dfd.resolve(); }); } }); $.when.apply(null, dfds).done(function() { animating = false; console.log('[AMUI] - 所有动画执行完成'); dfds = []; }); } }); }); </script>

参考资源

• CSS 动画
• Animate.css