# 动画 收集了一些可以流畅运行在你的页面中的简单动画。 ## 用法 要使用这个组件的话，添加任意一个 `.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 点击任意方框观看动画。  ### Markup ``` <div class="uk-animation-fade">...</div> ``` * * * ## 反向动画/Reverse modifier 默认地，所有动画都是元素出现的效果。要把动画反向，添加 `.uk-animation-reverse` 类就行啦。 ### Example 点击任意方框观看动画。  ### Markup ``` <div class="uk-animation-fade uk-animation-reverse">...</div> ``` * * * ## 持续时间修改/Duration modifier 要把动画持续时间延长到10秒，就添加 `.uk-animation-10` 类。 ### Example  ### 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  * * * ## 鼠标悬停与动画 通过鼠标悬停触发动画，只需添加 `.uk-animation-hover` 类到动画元素本身或者它的容器中。 ### Example  ### Markup ``` <div class="uk-animation-hover uk-animation-fade">...</div> <div class="uk-animation-hover"> <div class="uk-animation-slide-right">...</div> </div> ```