动画

一组基本的平滑动画，用于页面中。

用法

要应用此组件，请向元素添加任何 .uk-animation-* 类，它将以漂亮的动画淡入。这些类通常通过使用 JavaScript 来设置，以便将动画应用于特定行为。

类	描述
`.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`	元素缩小，不淡入。

示例

悬停在任何框上以查看动画。

淡入

放大

缩小

摇晃

顶部滑动

底部滑动

左侧滑动

右侧滑动

缩放

标记

<div class="uk-animation-fade">...</div>

反向修饰符

默认情况下，所有动画都是进入的。要反转任何动画，请添加 .uk-animation-reverse 类。

示例

悬停在任何框上以查看动画。

淡入

放大

缩小

摇晃

顶部滑动

底部滑动

左侧滑动

右侧滑动

缩放

标记

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

持续时间修饰符

要将动画持续时间延长到 15 秒，请添加 .uk-animation-15 类。

示例

右侧滑动

标记

<div class="uk-animation-slide-right uk-animation-15">...</div>

原点修饰符

默认情况下，缩放动画从中心开始。要修改此行为，请添加以下类之一。

类	描述
`.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`	动画从右下角展开。

示例

悬停在任何框上以查看动画。

左上

顶部中心

右上

中间左侧

中间右侧

左下

底部中心

右下

动画悬停

要在悬停时触发动画，只需将 .uk-animation-hover 类添加到动画元素本身或容器。

示例

淡入

右侧滑动

标记

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>