آموزش کامل انیمیشن‌های CSS | راهنمای جامع transition و keyframes + ۲۰ مثال عملی

.button {    background-color: #3498db;    color: white;    padding: 12px 24px;    border: none;    border-radius: 8px;    transition: background-color 0.3s ease;    cursor: pointer;  }  .button:hover {    background-color: #e74c3c;  }

<button class="button">هاور کن ببین</button>

.card {    width: 200px;    padding: 30px;    background: #ecf0f1;    text-align: center;    transition: transform 0.3s ease;    cursor: pointer;  }  .card:hover {    transform: scale(1.05);  }

.icon {    font-size: 48px;    transition: transform 0.4s ease;    display: inline-block;  }  .icon:hover {    transform: rotate(360deg);  }

.slide-item {    background: #9b59b6;    padding: 15px;    color: white;    transition: transform 0.3s ease;  }  .slide-item:hover {    transform: translateX(20px);  }

.product-card {    padding: 20px;    background: white;    transition: box-shadow 0.3s ease;  }  .product-card:hover {    box-shadow: 0 10px 30px rgba(0,0,0,0.2);  }

.fancy-button {    background: #2ecc71;    padding: 15px 30px;    border: none;    border-radius: 8px;    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);    cursor: pointer;  }  .fancy-button:hover {    background: #27ae60;    transform: scale(1.1) rotate(5deg);    box-shadow: 0 5px 15px rgba(0,0,0,0.2);  }

.expand-bar {    width: 100px;    height: 10px;    background: #e74c3c;    transition: width 0.5s ease;  }  .expand-bar:hover {    width: 300px;  }

.fade-element {    opacity: 0.5;    transition: opacity 0.4s ease;  }  .fade-element:hover {    opacity: 1;  }

.delayed-button {    background: #f39c12;    padding: 12px 24px;    transition: all 0.3s ease 0.5s; /* 0.5s delay */  }  .delayed-button:hover {    transform: scale(1.1);    background: #e67e22;  }

.three-d-card {    padding: 40px;    background: #3498db;    color: white;    transition: transform 0.4s ease;  }  .three-d-card:hover {    transform: perspective(500px) rotateX(10deg) rotateY(10deg);  }

@keyframes fadeIn {    from {      opacity: 0;    }    to {      opacity: 1;    }  }  .fade-in {    animation: fadeIn 1s ease;  }

@keyframes slideUp {    from {      opacity: 0;      transform: translateY(50px);    }    to {      opacity: 1;      transform: translateY(0);    }  }  .slide-up {    animation: slideUp 0.6s ease-out;  }

@keyframes spin {    from {      transform: rotate(0deg);    }    to {      transform: rotate(360deg);    }  }  .spinner {    width: 50px;    height: 50px;    border: 5px solid #ecf0f1;    border-top-color: #3498db;    border-radius: 50%;    animation: spin 1s linear infinite;  }

<div class="spinner"></div>

@keyframes pulse {    0% {      transform: scale(1);      opacity: 1;    }    50% {      transform: scale(1.1);      opacity: 0.8;    }    100% {      transform: scale(1);      opacity: 1;    }  }  .pulse-button {    background: #e74c3c;    padding: 15px 30px;    border: none;    border-radius: 8px;    color: white;    animation: pulse 1.5s ease infinite;  }

@keyframes shake {    0%, 100% { transform: translateX(0); }    25% { transform: translateX(-10px); }    75% { transform: translateX(10px); }  }  .error-input {    animation: shake 0.3s ease-in-out;    border-color: #e74c3c;  }

@keyframes ripple {    to {      transform: scale(4);      opacity: 0;    }  }  .ripple-button {    position: relative;    overflow: hidden;    background: #3498db;    padding: 12px 24px;    border: none;    color: white;  }  .ripple-button::after {    content: '';    position: absolute;    top: 50%;    left: 50%;    width: 0;    height: 0;    border-radius: 50%;    background: rgba(255,255,255,0.5);    transform: translate(-50%, -50%);    transition: all 0.3s;  }  .ripple-button:active::after {    width: 100px;    height: 100px;    animation: ripple 0.4s ease-out;  }

@keyframes bounce {    0%, 100% {      transform: translateY(0);    }    50% {      transform: translateY(-30px);    }    80% {      transform: translateY(10px);    }  }  .bounce-element {    background: #f39c12;    padding: 20px;    display: inline-block;    animation: bounce 2s ease infinite;  }

@keyframes typing {    from {      width: 0;    }    to {      width: 100%;    }  }  @keyframes blink {    50% {      border-color: transparent;    }  }  .typing-text {    width: 0;    white-space: nowrap;    overflow: hidden;    border-right: 2px solid #333;    animation: typing 3s steps(20, end) forwards,               blink 0.75s step-end infinite;  }

@keyframes reveal {    from {      opacity: 0;      transform: translateY(50px);    }    to {      opacity: 1;      transform: translateY(0);    }  }  .reveal {    animation: reveal 0.8s ease forwards;    opacity: 0;  }  /* با Intersection Observer در JS می‌توانید کلاس را اضافه کنید */

@keyframes progress {    from {      width: 0%;    }    to {      width: 100%;    }  }  .progress-bar {    height: 8px;    background: #2ecc71;    border-radius: 4px;    animation: progress 2s ease-out;  }

@keyframes wobble {    0%, 100% { transform: rotate(0deg); }    25% { transform: rotate(5deg); }    75% { transform: rotate(-5deg); }  }  .card:hover {    animation: wobble 0.3s ease;  }

@keyframes flash {    0%, 100% { opacity: 1; }    50% { opacity: 0.3; }  }  .notification {    background: #e74c3c;    padding: 10px;    color: white;    animation: flash 1s ease 3; /* 3 بار فلش بزند */  }

/* CSS */  .hamburger {    width: 30px;    height: 24px;    display: flex;    flex-direction: column;    justify-content: space-between;    cursor: pointer;  }  .hamburger span {    width: 100%;    height: 3px;    background: #333;    transition: all 0.3s ease;  }  .hamburger.active span:nth-child(1) {    transform: rotate(45deg) translate(8px, 8px);  }  .hamburger.active span:nth-child(2) {    opacity: 0;  }  .hamburger.active span:nth-child(3) {    transform: rotate(-45deg) translate(8px, -8px);  }  .menu {    position: fixed;    top: 0;    right: -250px;    width: 250px;    height: 100%;    background: #2c3e50;    transition: right 0.3s ease;    padding: 60px 20px;  }  .menu.active {    right: 0;  }

// جاوااسکریپت (فقط برای تغییر کلاس)  document.querySelector('.hamburger').addEventListener('click', () => {    document.querySelector('.hamburger').classList.toggle('active');    document.querySelector('.menu').classList.toggle('active');  });

<div class="hamburger">    <span></span>    <span></span>    <span></span>  </div>  <div class="menu">    <a href="#">خانه</a>    <a href="#">محصولات</a>    <a href="#">تماس</a>  </div>