# 动画 收集了一些可以流畅运行在你的页面中的简单动画。 ## 用法 要使用这个组件的话,添加任意一个 `.uk-animation-*` 类到一个元素中,它就会以一个炫酷的动画效果淡入。这些类通常是使用JavaScript实现动画的具体行为的。 | Class类 | 描述 | | --- | --- | | `.uk-animation-fade` | 元素淡入 | | `.uk-animation-scale-up` | 元素由小变大 | | `.uk-animation-scale-down` | 元素由大变小 | | `.uk-animation-slide-top` | 元素从顶部滑入 | | `.uk-animation-slide-bottom` | 元素从底部滑入 | | `.uk-animation-slide-left` | 元素从左边滑入 | | `.uk-animation-slide-right` | 元素从右边滑入 | | `.uk-animation-shake` | 元素震动 | | `.uk-animation-scale` | 元素由大变小而不改变透明度 | ### Example 点击任意方框观看动画。 ![](https://box.kancloud.cn/2016-05-12_57346f362f4a1.jpg) ### Markup ``` <div class="uk-animation-fade">...</div> ``` * * * ## 反向动画/Reverse modifier 默认地,所有动画都是元素出现的效果。要把动画反向,添加 `.uk-animation-reverse` 类就行啦。 ### Example 点击任意方框观看动画。 ![](https://box.kancloud.cn/2016-05-12_57346f36430e0.jpg) ### Markup ``` <div class="uk-animation-fade uk-animation-reverse">...</div> ``` * * * ## 持续时间修改/Duration modifier 要把动画持续时间延长到10秒,就添加 `.uk-animation-10` 类。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3654aef.jpg) ### Markup ``` <div class="uk-animation-slide-right uk-animation-10">...</div> ``` * * * ## 源头修改/Origin modifier 默认情况下,缩放动画的源头是中间。修改这个行为,添加以下类中的一个就行。 | Class类 | 描述 | | --- | --- | | `.uk-animation-top-left` | 动画从左上角展开 | | `.uk-animation-top-center` | 动画从上方中间展开 | | `.uk-animation-top-right` | 动画从右上角展开 | | `.uk-animation-middle-left` | 动画从左边中间展开 | | `.uk-animation-middle-right` | 动画从右边中间展开 | | `.uk-animation-bottom-left` | 动画从左下角展开 | | `.uk-animation-bottom-center` | 动画从底部中间展开 | | `.uk-animation-bottom-right` | 动画从右下角展开 | ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3666065.jpg) * * * ## 鼠标悬停与动画 通过鼠标悬停触发动画,只需添加 `.uk-animation-hover` 类到动画元素本身或者它的容器中。 ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3677c8b.jpg) ### Markup ``` <div class="uk-animation-hover uk-animation-fade">...</div> <div class="uk-animation-hover"> <div class="uk-animation-slide-right">...</div> </div> ```