样式

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>