colorUI

微动画 | ColorUI 使用文档

1：把colorui里三个文件复制到自己项目中去

App.vue

</script>
<style>
@import url('colorui/icon.css');
@import url('colorui/main.css');
@import url("colorui/animation.css");
	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}
</style>

 

具体来说，这个动画包含以下关键帧：

• 0%：动画开始时，元素的位置会沿着Y轴向上移动50像素。这是通过transform: translateY(-50px);实现的。
• 60%：动画进行到60%时，元素的位置会沿着Y轴向上移动40像素。这是通过transform: translateY(40upx);实现的。这里的upx表示单位为像素，所以实际移动的距离是40像素。
• 100%：动画结束时，元素的位置会回到原始位置，即Y轴上不移动。这是通过transform: translateY(0px);实现的。

通过使用这个动画，你可以控制元素的显示效果，例如使其逐渐出现或向下移动。

2：想要的c复制到自己的项目中

例如：

//动画
 
<div v-for="(item,index) in 10" :key="index" class="box" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
    </div>

//渐显

    <button class="cu-btn margin-sm basis-sm shadow animation-scale-up" style="animation-delay: 0.2s;animation-duration: 1.2s;animation-timing-function:ease"
>111</button>

以下是一些常用的动画CSS属性：

1. animation-name: 指定要应用的动画名称。
2. animation-duration: 设置动画的持续时间，以秒（s）或毫秒（ms）为单位。
3. animation-timing-function: 定义动画的速度曲线，如线性、缓动、加速等。
4. animation-delay: 设置动画开始前的延迟时间，以秒（s）或毫秒（ms）为单位。
5. animation-iteration-count: 定义动画的迭代次数，可以是固定次数（如1、2、3...），也可以是无限循环（如infinite）。
6. animation-direction: 控制动画的方向，可以是正向播放（normal）、反向播放（reverse）或来回播放（alternate）。
7. animation-fill-mode: 定义动画在结束后的状态，可以是保持最后帧（forwards）、回到初始状态（backwards）或两者兼有（both）。
8. animation-play-state: 控制动画是否正在运行或暂停。
9. animation: 是一个简写属性，用于一次性设置以上所有动画属性。

这些属性可以组合使用，以创建各种复杂的动画效果。通过调整这些属性的值和取值范围，可以实现不同的动画效果和行为。

animation-timing-function属性用于定义动画的速度曲线，即动画的缓动效果。它接受一个或多个值来描述动画的速度变化过程。

常用的缓动函数有以下几个：

1. linear: 表示动画以恒定速度进行，没有加速和减速的过程。
2. ease: 表示动画以慢速开始，然后逐渐加速，最后以慢速结束。
3. ease-in: 表示动画以慢速开始，然后逐渐加速。
4. ease-out: 表示动画以慢速结束，然后逐渐减速。
5. ease-in-out: 表示动画以慢速开始和结束，然后逐渐加速和减速。
6. cubic-bezier(x1, y1, x2, y2): 使用贝塞尔曲线定义自定义的缓动函数，其中x1、y1、x2、y2是控制点坐标。

通过调整这些缓动函数的值，可以创建不同的动画效果，如平滑过渡、跳跃式变化等。