1. Scale Animation

css

    .scale-box {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

        &.scaled {
            transform: scale(1.5);
        }
    }

2. Translate Animation

css

    .translate-box {
        transition: transform 1s ease-in-out;

        &.translated {
            transform: translateX(10rem);
        }
    }

3. Rotate Animation

css

    .translate-box {
        transition: transform 1s ease-in-out;

        &.translated {
            transform: rotate(360deg);
        }
    }

4. Opacity Animation

css

    .opacity-box {
        transition: opacity 1s ease-in-out;

        &.faded {
            opacity: 0.5;
        }
    }

5. Hover Animation

css

    .hover-box {
        transition: all 1s ease-in-out;
        cursor: pointer;

        &:hover {
            transform: scale(1.5);
            opacity: 0.8;
            background-color: #d98484;
        }
    }