@use "../common/root";

@mixin keyframes($animationName) {
	@keyframes #{$animationName} {
		@content;
	}
}

// 旋转
.rotate-center {
	animation-name: rotateName;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
@include keyframes(rotateName) {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

// 过渡动画 横向渐变
.fade-transverse-leave-active,
.fade-transverse-enter-active {
	transition: all 0.5s;
}
.fade-transverse-enter {
	opacity: 0;
	transform: translateX(-30px);
}
.fade-transverse-leave-to {
	opacity: 0;
	transform: translateX(30px);
}

// 过渡动画 缩放渐变
.fade-scale-leave-active,
.fade-scale-enter-active {
	transition: all 0.5s;
}
.fade-scale-enter {
	opacity: 0;
	transform: scale(1.2);
}
.fade-scale-leave-to {
	opacity: 0;
	transform: scale(0.8);
}

.transition-w-1s {
	transition: width 1s;
	-moz-transition: width 1s; /* Firefox 4 */
	-webkit-transition: width 1s; /* Safari 和 Chrome */
	-o-transition: width 1s; /* Opera */
}

// 毛玻璃效果
.header-trans {
	background-image: radial-gradient(transparent 1px, #FFFFFF 1px);
	background-size: 4px 4px;
	backdrop-filter: saturate(50%) blur(4px);
}
