8 انیمیشن خلاقانه CSS برای جان‌بخشی به رابط کاربری

<div class="card-container">
	<div class="card">
		<div class="front">جلوی کارت</div>
		<div class="back">پشت کارت</div>
	</div>
</div>

.card-container {
	perspective: 1000px;
	width: 300px;
	height: 200px;
}

.card {
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.card-container:hover .card {
	transform: rotateY(180deg);
}

.front, .back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.back {
	transform: rotateY(180deg);
}

/* index.html */
<div class="skeleton-loader min-h-180">
	<img src="heavy-image.png" alt="image" />
</div>


/* style.css */
.skeleton-loader {
	background-color: #e2e5e7;
	width: 100%;
	height: 100%;
	background-image: 
		linear-gradient(90deg, 
			rgba(255, 255, 255, 0), 
			rgba(255, 255, 255, 0.5), 
			rgba(255, 255, 255, 0)
	);
	background-size: 40px 100%;
	background-repeat: no-repeat;
	background-position: left -40px top 0;
	animation: shine 1s ease infinite;
}
@keyframes shine {
	to {
		background-position: right -40px top 0;
	}
}
.min-h-180 {
	min-height: 180px;
}

.typewriter-effect{
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	animation: typing 3s steps(41) forwards infinite;
}

@keyframes typing {
	0% { width: 0; }
	40% { width: 41ch; }
	60% { width: 41ch;}
	90% { width: 0;}
}

/* index.html */ 
<div class="morphing-shape"></div>


/* style.css */
.morphing-shape {
	width: 160px;
	height: 160px;
	background: radial-gradient(circle at 30% 30%, #ff6f91, #ff9671, #ffc75f, #f9f871);
	background-size: 300% 300%;
	animation: morph 4s ease-in-out infinite, gradientShift 6s ease infinite, pulse 3s ease-in-out infinite;
	border-radius: 50%;
	box-shadow: 0 0 25px rgba(255, 118, 118, 0.3), inset 0 0 10px rgba(255,255,255,0.2);
	transition: all 0.8s ease-in-out;
}

@keyframes morph {
	0% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
	25% {
		border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%;
	}
	50% {
		border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%;
	}
	75% {
		border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
	}
	100% {
		border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
	}
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 25px rgba(255, 118, 118, 0.3), inset 0 0 10px rgba(255,255,255,0.2);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 0 35px rgba(255, 118, 118, 0.5), inset 0 0 14px rgba(255,255,255,0.3);
	}
}

<button className="btn btn-red">
	<span className="btn-label">منو لمس کن</span>
	<div className="btn-bg"></div>
</button>

<button className="btn btn-amber">
	<span className="btn-label">منو لمس کن</span>
	<div className="btn-bg-center"></div>
</button>

<button className="btn btn-gray">
	<span className="btn-label">منو لمس کن</span>
	<div className="btn-bg-full"></div>
</button>

.btn {
	width: 160px;
	height: 48px;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	border: 1px solid;
	background: transparent;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease;
}

.btn:hover {
	color: white;
}

.btn-label {
	position: relative;
	z-index: 10;
}

.btn-bg {
	position: absolute;
	right: 0;
	width: 0;
	height: 100%;
	transition: width 0.3s ease;
	z-index: 1;
}

.btn:hover .btn-bg {
	width: 100%;
}
.btn-bg-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 0;
	height: 0;
	transition: width 0.3s ease;
	z-index: 1;
}
.btn:hover .btn-bg-center{
	width: 100%;
	height: 100%;
}
.btn-bg-full {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	transition: width 0.3s ease, height 0.3s ease;
	z-index: 1;
}

.btn:hover .btn-bg-full {
  width: 100%;
  height: 100%;
}

/* رنگ‌ها */
.btn-red {
	border-color: #b91c1c;
	color: #b91c1c;
}

.btn-red .btn-bg,
.btn-red .btn-bg-full {
	background-color: #b91c1c;
}

.btn-amber {
	border-color: #d97706;
	color: #d97706;
}

.btn-amber .btn-bg,
.btn-amber .btn-bg-center {
	background-color: #d97706;
}

.btn-gray {
	border-color: #1f2937;
	color: #1f2937;
}

.btn-gray .btn-bg,
.btn-gray .btn-bg-full {
	background-color: #1f2937;
}

.fade-move {
	opacity: 0;
	transform: translateY(40px);
	animation: fadeMoveAnim 1s ease-out forwards;
}

@keyframes fadeMoveAnim {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-move {
	opacity: 1;
	transform: translateY(0);
	animation: fadeMoveAnim 1s ease-out forwards;
}

@keyframes fadeMoveAnim {
	to {
		opacity: 0;
		transform: translateY(40px);
	}
}

/* index.html */
<p class="anime-time-view-40">
	لورم ایپسوم .....
</p>


/* style.css */
@keyframes fadeIn-40{
	0%{
		opacity: 0;
	}40%{
		opacity: 1;
	}
}
@keyframes fadeIn-20{
	0%{
		opacity: 0;
	}20%{
		opacity: 1;
	}
}
.anime-time-view-40{
	animation: fadeIn-40 linear;
	animation-timeline: view();
}
.anime-time-view-20{
	animation: fadeIn-20 linear;
	animation-timeline: view();
}

/* index.html */ 
<div class="progress-bar-container">
	<div class="progress-bar"></div>
</div>


/* style.css */
.progress-bar-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;
	background-color: #eee;
	z-index: 1000;
}

.progress-bar {
	height: 100%;
	background-color: #4caf50;
	width: 0%;
	animation-name: fillProgress;
	animation-timeline: scroll();
	animation-range: 0% 100%;
}

@keyframes fillProgress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

<div class="container">
	<div class="wrapper">
		<div class="image-box">
			<img class="animated-image" src="https://images.pexels.com/photos/5120892/pexels-photo-5120892.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=625.0&sharp=10&w=1000" alt="three girls in form" loading="lazy" />
		</div>
		<div class="text-box">
			<span class="title">تصویر بالارو با لمس کن</span>
			<p class="description">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
			<span class="note">تلاش راه حل پیروزی است</span>
		</div>
	</div>
</div>

.container {
	max-width: 500px;
	margin: 0 auto;
	padding: 1.25rem;
}

.wrapper {
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

.image-box {
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
}

.animated-image {
	width: 100%;
	transition: transform 0.3s ease-in-out;
}

.animated-image:hover {
	transform: translateY(4rem) scale(3);
}

.text-box {
	position: relative;
	margin: 1.25rem;
	margin-top: -4rem;
	padding: 1.25rem 1.25rem 0.5rem;
	border-bottom: 1px solid #4f46e5;
	background-color: white;
}

.title {
	font-weight: 600;
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
	display: block;
}

.description {
	padding-bottom: 1rem;
	opacity: 0.7;
	font-size: 0.875rem;
}

.note {
	color: #4f46e5;
	font-size: 0.75rem;
}