Ease-in and Ease-out in CSS

The ease-in and ease-out are timing functions in CSS used to control the speed of a CSS Animation or transition over time. They define the rate of change of the animation, determining how quickly or slowly it accelerates or decelerates.

Both ease-in and ease-out are variations of the more general ease-timing function.

Ease-in and Ease-out in CSS

The ease-in and ease-out are timing functions in CSS used to control the speed of animations or transitions over time. They define how the speed of an animation changes during its duration, determining how quickly or slowly it accelerates or decelerates. Both are specific variations of the general ease timing function.

Here is the general syntax for both ease-in and ease-out functions:

Syntax:

/* The ease-in timing function */
.element {  
transition: property-name duration ease-in;
}
 
/* The ease-out timing function */
.element {   
transition: property-name duration ease-out; 
}
 
/* The ease timing function */
.element {  
transition: property-name duration ease; 
}

This is the general code for both ease-in and ease-out functions:

Ease-in Timing Function

The ease-in timing function starts the animation slowly and gradually accelerates toward the end. The initial phase of the animation is slower, providing a smooth and gentle start.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ease-in Example - GeeksforGeeks</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            margin-top: 50px;
            padding-left: 20px;
        }

        .ease-in-box {
            width: 200px;
            height: 100px;
            background-color: #28a745;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 1s ease-in;
        }

        .ease-in-box:hover {
            transform: translateX(200px);
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="ease-in-box">GeeksforGeeks</div>
    </div>

</body>
</html>

Output :

Ease-out Timing Function

The ease-out timing function starts the animation quickly and decelerates toward the end. The initial phase of the animation is faster, but it slows down as it progresses, giving a smooth and gentle finish.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ease-out Example</title>
    <style>
        .container {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }

        .ease-out-box {
            width: 200px;
            height: 100px;
            background-color: green; 
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 1s ease-out;
        }

        .ease-out-box:hover {
            transform: translateX(200px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="ease-out-box">GeeksforGeeks</div>
    </div>
</body>
</html>

Output:

Ease-in and Ease-out in CSS