CSS之卡片抖动

最新推荐文章于 2024-02-17 20:36:12 发布

月下脆竹書閣

最新推荐文章于 2024-02-17 20:36:12 发布

阅读量298

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/c_x_m/article/details/128410187

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS之卡片抖动

由于我点保存时，右侧卡片必填信息提示不明细，想要增加动画抖动效果

在这里插入图片描述

具体的css代码如下：

.shake-constant {
	animation-name: shake-hard;
	animation-duration: 0.8s; //动画持续时间
	animation-timing-function: ease-in-out;
	// animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
}
@keyframes shake-hard {
	2% {
		transform: translate(3px, -8px) rotate(-0.5deg);
	}
	4% {
		transform: translate(-9px, 5px) rotate(-0.5deg);
	}
	6% {
		transform: translate(-6px, 9px) rotate(2.5deg);
	}
	8% {
		transform: translate(-8px, 9px) rotate(0.5deg);
	}
	10% {
		transform: translate(-6px, -1px) rotate(0.5deg);
	}
	12% {
		transform: translate(-9px, 2px) rotate(2.5deg);
	}
	14% {
		transform: translate(-2px, 9px) rotate(-1.5deg);
	}
	16% {
		transform: translate(0px, 10px) rotate(-0.5deg);
	}
	18% {
		transform: translate(-3px, -3px) rotate(3.5deg);
	}
	20% {
		transform: translate(8px, -1px) rotate(3.5deg);
	}
	22% {
		transform: translate(10px, -4px) rotate(-0.5deg);
	}
	24% {
		transform: translate(0px, -8px) rotate(0.5deg);
	}
	26% {
		transform: translate(-1px, 2px) rotate(-1.5deg);
	}
	28% {
		transform: translate(8px, 8px) rotate(-1.5deg);
	}
	30% {
		transform: translate(-9px, 5px) rotate(-0.5deg);
	}
	32% {
		transform: translate(1px, 10px) rotate(1.5deg);
	}
	34% {
		transform: translate(7px, -4px) rotate(3.5deg);
	}
	36% {
		transform: translate(2px, -8px) rotate(-1.5deg);
	}
	38% {
		transform: translate(6px, 10px) rotate(-2.5deg);
	}
	40% {
		transform: translate(3px, -1px) rotate(0.5deg);
	}
	42% {
		transform: translate(-5px, -4px) rotate(-0.5deg);
	}
	44% {
		transform: translate(-3px, 10px) rotate(-2.5deg);
	}
	46% {
		transform: translate(-7px, 2px) rotate(-2.5deg);
	}
	48% {
		transform: translate(-5px, -1px) rotate(3.5deg);
	}
	50% {
		transform: translate(-7px, -1px) rotate(1.5deg);
	}
	52% {
		transform: translate(2px, 8px) rotate(-1.5deg);
	}
	54% {
		transform: translate(7px, -9px) rotate(0.5deg);
	}
	56% {
		transform: translate(-4px, 1px) rotate(1.5deg);
	}
	58% {
		transform: translate(-2px, -8px) rotate(1.5deg);
	}
	60% {
		transform: translate(-7px, 1px) rotate(-0.5deg);
	}
	62% {
		transform: translate(-5px, -2px) rotate(-0.5deg);
	}
	64% {
		transform: translate(-2px, 5px) rotate(-2.5deg);
	}
	66% {
		transform: translate(-2px, 7px) rotate(3.5deg);
	}
	68% {
		transform: translate(-7px, -1px) rotate(-0.5deg);
	}
	70% {
		transform: translate(-5px, 8px) rotate(-2.5deg);
	}
	72% {
		transform: translate(-3px, -9px) rotate(-2.5deg);
	}
	74% {
		transform: translate(-2px, -7px) rotate(3.5deg);
	}
	76% {
		transform: translate(-5px, -4px) rotate(2.5deg);
	}
	78% {
		transform: translate(-2px, 10px) rotate(-1.5deg);
	}
	80% {
		transform: translate(4px, 9px) rotate(3.5deg);
	}
	82% {
		transform: translate(3px, -1px) rotate(-1.5deg);
	}
	84% {
		transform: translate(4px, -6px) rotate(0.5deg);
	}
	86% {
		transform: translate(-1px, 4px) rotate(-0.5deg);
	}
	88% {
		transform: translate(10px, -5px) rotate(3.5deg);
	}
	90% {
		transform: translate(-3px, 7px) rotate(-0.5deg);
	}
	92% {
		transform: translate(5px, -2px) rotate(2.5deg);
	}
	94% {
		transform: translate(-2px, -7px) rotate(-0.5deg);
	}
	96% {
		transform: translate(0px, 10px) rotate(-2.5deg);
	}
	98% {
		transform: translate(-4px, 3px) rotate(2.5deg);
	}
	0%,
	100% {
		transform: translate(0, 0) rotate(0);
	}
}

如何去控制抖动显示隐藏

动态控制类
:class="[isShake ? 'shake-constant' : '']"
何时触发isShake=true/false

this.$refs.submitRef.validate((validate) => {
	if (validate) {
		this.isShake = false; //停止抖动
	} else {
		this.isShake = true;
		setTimeout(() => {
			this.isShake = false;
		}, 1000 * 0.8); //0.8秒后抖动恢复原值(因为动画持续时间0.8秒，0.8秒后取消动画)
	}