CSS Transitions, Animations, and Transforms

1. CSS Transition Example

Hover over the box to see the transition effect.

Explanation:

This example uses CSS transitions. The box will change its background color and scale when you hover over it.

/* Transition example: On hover, change color and scale */
.transition-box:hover {
    background-color: #FF5722;
    transform: scale(1.2);
}
        

2. CSS Animation Example

The box will bounce up and down due to the animation.

Explanation:

This example uses CSS animations with keyframes. The box will continuously bounce up and down.

/* Animation example using keyframes */
.animate-box {
    animation: bounce 2s infinite;
}

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

3. CSS Transform Example

The box is rotated and moved to the right using the transform property.

Explanation:

This example uses the CSS transform property to rotate the box 45 degrees and move it 50px to the right.

/* Transform example: Rotate and translate */
.transform-box {
    transform: rotate(45deg) translateX(50px);
}