# 样式

## Kico Style 的内置样式

# 动画

优雅的过渡动画，为你的页面添加另一份趣味！

> 使用 CSS 引用对应的动画，这样会使得你的代码简洁且能更好的扩展特性。

在你的选择器里插入 `animation` 属性，并添加框架内置的 `@keyframes` 即可实现！

查看代码：

    .test-animation {
      animation: rotate linear 2s infinite; /* 动画名称 动画函数曲线 时长 */
    }

类型 | 名称 | 行为
--- | --- | ---
淡入淡出 | fade-in | 一般淡入
淡入淡出 | fade-off | 一般淡出
淡入淡出 | fade-in-top | 向上淡入
淡入淡出 | fade-in-bottom | 向下淡入
淡入淡出 | fade-in-left | 向左淡入
淡入淡出 | fade-in-right | 向右淡入
淡入缩放 | fade-small-large | 从大变小的淡入
淡入缩放 | fade-large-small | 从小变大的淡入
淡入缩放 | fade-larger-small | 从更大变小的淡入
淡入缩放 | fade-small-larger | 从小变更大的淡出
缩放 | scale-small-large | 从小变大
缩放 | scale-large-small | 从大变小
平移 | up-and-down | 上下摆动
平移 | left-and-right | 左右摆动
旋转 | rotate | 旋转

## 淡入淡出动画：

查看代码：

    <button class="btn yellow" style="animation: fade-in 1s infinite">一般淡入</button>
    <button class="btn yellow" style="animation: fade-off 1s infinite">一般淡出</button>
    <button class="btn yellow" style="animation: fade-in-top 1s infinite">向上淡入</button>
    <button class="btn yellow" style="animation: fade-in-bottom 1s infinite">向下淡入</button>
    <button class="btn yellow" style="animation: fade-in-left 1s infinite">向左淡入</button>
    <button class="btn yellow" style="animation: fade-in-right 1s infinite">向右淡入</button>

## 淡入缩放动画：

查看代码：

    <button class="btn yellow" style="animation: fade-small-large 1s infinite">从小到大</button>
    <button class="btn yellow" style="animation: fade-large-small 1s infinite">从大到小</button>
    <button class="btn yellow" style="animation: fade-larger-small 1s infinite">从更大缩小</button>
    <button class="btn yellow" style="animation: fade-small-larger 1s infinite">从正常放大</button>

## 缩放动画：

查看代码：

    <button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
    <button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>

## 平移动画：

查看代码：

    <button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下运动</button>
    <button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右运动</button>

## 旋转动画：

查看代码：

    <button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>