The ease-in timing function is a value for the transition-timing-function property in CSS. It dictates that a transition or animation effect will begin at a slow pace and then progressively accelerate until it concludes. This creates a more dynamic and less robotic motion, perfect for elements that are starting an action.
Example 1: Width Expansion
/* This div will expand its width when hovered. */
.expand-box {
width: 150px;
height: 75px;
background-color: #3498db; /* Initial blue color. */
color: white;
text-align: center;
line-height: 75px;
transition: width 2s ease-in; /* Defines the transition on the width property over 2 seconds with an ease-in effect. */
}
/* When the user hovers over the box, its width increases. */
.expand-box:hover {
width: 300px; /* The final width of the element. */
}
Explanation When you hover your cursor over the blue box, its width animates from 150px to 300px. The ease-in function causes this expansion to start slowly and then gather speed, making the initial change subtle.
Example 2: Vertical Movement
/* The container that holds the moving element. */
.move-container {
height: 200px;
border: 2px solid #f0f0f0;
}
/* The element that will move downwards. */
.drop-down {
width: 100px;
height: 50px;
background-color: #2ecc71; /* A green background color. */
position: relative;
top: 0;
transition: top 2.5s ease-in; /* Applies the transition to the 'top' property. */
}
/* On hover of the container, the element moves down. */
.move-container:hover .drop-down {
top: 150px; /* The final vertical position. */
}
Explanation In this example, hovering over the container causes the green box to move downwards. The ease-in value ensures the box starts its descent slowly, as if overcoming inertia, before accelerating towards its final position.
Example 3: Opacity Fade-In
/* The image will start as invisible. */
.fade-image {
width: 200px;
opacity: 0; /* Element is fully transparent initially. */
transition: opacity 3s ease-in; /* Transition effect for the opacity property. */
}
/* When hovered, the image becomes fully visible. */
.fade-image:hover {
opacity: 1; /* Element is fully opaque at the end of the transition. */
}
Explanation This code makes an image fade into view when you hover over it. The ease-in timing function makes the beginning of the fade-in very slow and gradual, after which it speeds up until the image is fully visible.
Example 4: Scale Transformation
/* The button element that will grow. */
.scale-up-button {
padding: 15px 25px;
background-color: #9b59b6; /* A purple background. */
color: white;
border: none;
font-size: 16px;
cursor: pointer;
transition: transform 1.5s ease-in; /* Transition applied to the transform property. */
}
/* On hover, the button scales up in size. */
.scale-up-button:hover {
transform: scale(1.2); /* Increases the size of the element by 20%. */
}
Explanation Hovering over this button will cause it to grow larger. The ease-in function dictates that the scaling animation starts slowly and then accelerates, giving the impression of the button "powering up".
Example 5: Border Color Change
/* A text input field that will change its border color on focus. */
.input-focus {
padding: 10px;
border: 3px solid #ccc; /* Initial grey border. */
transition: border-color 2s ease-in; /* Transition for the border-color property. */
}
/* When the input field is in focus, the border color changes. */
.input-focus:focus {
border-color: #e74c3c; /* A red border color on focus. */
outline: none; /* Removes the default browser outline. */
}
Explanation When you click on the input field to type, its border color changes from grey to red. The ease-in timing function makes the initial phase of the color change happen slowly, with the color shift accelerating over the 2-second duration.