CSS Transitions ও Animations

Transition (সহজ animation)

Property পরিবর্তনের সময় মসৃণ transition দেখাতে ব্যবহৃত হয়।

.btn {
    background: blue;
    color: white;
    padding: 10px 20px;
    transition: background 0.3s ease, transform 0.3s ease;
}
.btn:hover {
    background: red;
    transform: scale(1.1);
}

/* সংক্ষিপ্ত */
transition: all 0.3s ease-in-out;
/* property  duration  timing-function  delay */
transition: background 0.5s ease 0.1s;

Timing Functions

• linear — সমান গতি
• ease — ধীরে শুরু, মাঝে দ্রুত, ধীরে শেষ (default)
• ease-in — ধীরে শুরু
• ease-out — ধীরে শেষ
• cubic-bezier(0.4, 0, 0.2, 1) — কাস্টম

Transform

.box {
    transform: translate(50px, 20px);   /* সরানো */
    transform: translateX(50px);
    transform: rotate(45deg);             /* ঘোরানো */
    transform: scale(1.5);                /* আকার */
    transform: scaleX(0.5);
    transform: skew(15deg, 10deg);        /* বাঁকানো */

    /* একাধিক একসাথে */
    transform: translate(10px, 20px) rotate(45deg) scale(1.2);

    /* 3D */
    transform: rotateX(45deg) rotateY(45deg);
    transform: perspective(500px) rotateY(30deg);
}

transform-origin: top left;  /* rotation/scale এর center */

Keyframe Animation

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-30px); }
    100% { transform: translateY(0); }
}

.element {
    animation: slide-in 1s ease-out;
}

.ball {
    animation: bounce 1s infinite;
}

Animation Properties

.box {
    animation-name: slide-in;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;  /* 3, infinite */
    animation-direction: alternate;        /* normal, reverse */
    animation-fill-mode: forwards;         /* শেষ অবস্থায় থামবে */
    animation-play-state: running;         /* paused */

    /* সংক্ষিপ্ত */
    animation: slide-in 1s ease 0.5s infinite alternate forwards;
}

বাস্তব উদাহরণ: Loading Spinner

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