动画
收集了一些可以流畅运行在你的页面中的简单动画。
用法
要使用这个组件的话,添加任意一个 animation-*
类到一个元素中,它就会以一个炫酷的动画效果淡入。这些类通常是使用JavaScript实现动画的具体行为的。
类 | 描述 |
---|---|
animation-fade |
元素淡入 |
animation-scale-up |
元素由小变大 |
animation-scale-down |
元素由大变小 |
animation-slide-top |
元素从顶部滑入 |
animation-slide-bottom |
元素从底部滑入 |
animation-slide-left |
元素从左边滑入 |
animation-slide-right |
元素从右边滑入 |
animation-shake |
元素震动 |
animation-scale |
元素由大变小而不改变透明度 |
示例
点击任意方框观看动画。
淡入
由小变大
由大变小
震动
缩放
代码
<div class="animation-fade">...</div>
反向动画
示例
要把动画反向显示,只需添加 animation-reverse
类。
淡入
由小变大
由大变小
震动
顶部滑入
底部滑入
左边滑入
右边滑入
缩放
代码
<div class="animation-fade animation-reverse">...</div>
持续时间修改
示例
要把动画持续时间延长到10秒,就添加 animation-10
类。
代码
<div class="animation-slide-right animation-10">...</div>
动画中心
默认情况下,缩放动画的中心是中间。修改这个行为,添加以下类中的一个就行。
类 | 描述 |
---|---|
animation-top-left |
动画从左上角展开 |
animation-top-center |
动画从上方中间展开 |
animation-top-right |
动画从右上角展开 |
animation-middle-left |
动画从左边中间展开 |
animation-middle-right |
动画从右边中间展开 |
animation-bottom-left |
动画从左下角展开 |
animation-bottom-center |
动画从底部中间展开 |
animation-bottom-right |
动画从右下角展开 |
示例
左上
中上
右上
左中
右中
左下
中下
右下
鼠标悬停动画
通过鼠标悬停触发动画,只需添加 animation-hover
类到动画元素本身或者它的容器中。
示例
淡入
代码
<div class="animation-hover animation-fade">...</div>
<div class="animation-hover">
<div class="animation-slide-right">...</div>
</div>