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

Set an animation with a slow start and end using CSS

CSS Web Development Front End Technology

The CSS animation-timing-function property controls the speed curve of animations. Use the ease-in-out value to create animations that start slowly, speed up in the middle, and slow down at the end for smooth, natural motion.

Syntax

selector {
    animation-timing-function: ease-in-out;
}

Possible Values

Value Description
ease-in-out Slow start and slow end
ease Slow start, fast middle, slow end (default)
ease-in Slow start only
ease-out Slow end only
linear Constant speed throughout

Example

The following example demonstrates an animation with slow start and end using ease-in-out −

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
        position: relative;
        margin: 20px;
        animation: moveRight 3s ease-in-out infinite alternate;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    
    @keyframes moveRight {
        from {
            left: 0px;
        }
        to {
            left: 300px;
        }
    }
</style>
</head>
<body>
    <div class="box">Box</div>
</body>
</html>

A green rounded box smoothly moves from left to right with slow acceleration at the start, faster movement in the middle, and slow deceleration at the end. The animation repeats in alternating directions.

Comparison of Timing Functions

Here's a comparison showing different timing function effects −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 400px;
        margin: 20px;
    }
    
    .demo-box {
        width: 80px;
        height: 80px;
        margin: 10px 0;
        position: relative;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        animation: slide 2s infinite alternate;
    }
    
    .ease-in-out {
        background-color: #e74c3c;
        animation-timing-function: ease-in-out;
    }
    
    .linear {
        background-color: #3498db;
        animation-timing-function: linear;
    }
    
    .ease-in {
        background-color: #2ecc71;
        animation-timing-function: ease-in;
    }
    
    @keyframes slide {
        from { left: 0px; }
        to { left: 250px; }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="demo-box ease-in-out">ease-in-out</div>
        <div class="demo-box linear">linear</div>
        <div class="demo-box ease-in">ease-in</div>
    </div>
</body>
</html>

Three colored boxes move horizontally showing different timing functions: the red box (ease-in-out) starts slow, speeds up, then slows down; the blue box (linear) moves at constant speed; the green box (ease-in) starts slow then speeds up.

Conclusion

The ease-in-out timing function creates the most natural-looking animations by mimicking real-world motion with gradual acceleration and deceleration. This makes animations feel smooth and polished.

Updated on: 2026-03-15T12:41:27+05:30

365 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements