Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Perform Animation on CSS min-width

CSS Web Development Front End Technology

The CSS min-width property can be animated to create dynamic width transitions. This property sets the minimum width of an element, and when animated, it smoothly transitions between different minimum width values.

Syntax

selector {
    animation: animation-name duration timing-function iteration-count;
}

@keyframes animation-name {
    percentage {
        min-width: value;
    }
}

Example: Animating min-width Property

The following example demonstrates how to animate the min-width property using CSS keyframes −

<!DOCTYPE html>
<html>
<head>
<style>
    .animated-box {
        overflow: auto;
        width: 50%;
        min-width: 200px;
        background-color: #2196F3;
        color: white;
        border: 2px solid #1976D2;
        padding: 20px;
        margin: 20px 0;
        animation: expandWidth 4s ease-in-out infinite;
    }
    
    @keyframes expandWidth {
        0% {
            min-width: 200px;
        }
        50% {
            min-width: 500px;
        }
        100% {
            min-width: 200px;
        }
    }
    
    h1 {
        color: #333;
        font-family: Arial, sans-serif;
    }
</style>
</head>
<body>
    <h1>CSS min-width Animation Example</h1>
    <div class="animated-box">
        <p>Watch this container animate! The min-width property is being animated from 200px to 500px and back. This creates a smooth expanding and contracting effect while maintaining the minimum width constraint.</p>
    </div>
</body>
</html>

A blue container with white text continuously expands from 200px minimum width to 500px and back to 200px over 4 seconds, creating a smooth breathing animation effect.

Key Points

  • The min-width property ensures the element never becomes smaller than the specified value
  • Animation works smoothly between different minimum width values
  • Use ease-in-out timing function for natural-looking animations
  • The overflow: auto property helps handle content that might exceed the animated width

Conclusion

Animating the min-width property creates engaging width transitions while maintaining minimum size constraints. This technique is useful for responsive designs and interactive UI elements.

Updated on: 2026-03-15T13:34:45+05:30

334 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements