The ease-out timing function is a value for the transition-timing-function and animation-timing-function properties in CSS. It dictates that a transition or animation starts at a fast pace and then gradually decelerates to a complete stop, creating a smooth and natural-looking effect. This is often used for elements that are coming into view or finishing a movement.
Example 1: Width Transition
/* This example demonstrates the ease-out timing function on the width property. */
.box-width {
width: 100px;
height: 100px;
background-color: #3498db;
transition: width 2s ease-out; /* The transition will take 2 seconds and use the ease-out function. */
}
.box-width:hover {
width: 300px; /* The width will expand on hover. */
}
Explanation
When you hover over the .box-width element, its width animates from 100px to 300px over two seconds. The ease-out function causes the expansion to start quickly and then slow down as it reaches its final width, providing a fluid visual effect.
Example 2: Opacity Fade-In
/* This example shows the ease-out timing function applied to the opacity property. */
.fade-in {
opacity: 0;
transition: opacity 1.5s ease-out; /* The opacity transition will last 1.5 seconds with ease-out. */
}
.container:hover .fade-in {
opacity: 1; /* The element will become fully visible on hover of its container. */
}
Explanation
In this code, the .fade-in element is initially invisible. When its container is hovered, it fades in to full opacity over 1.5 seconds, starting the transition rapidly and then gently finishing.
Example 3: Margin-Left Movement
/* This example uses the ease-out timing function to animate the margin-left property. */
.slide-right {
margin-left: 0;
transition: margin-left 1s ease-out; /* The margin-left property will transition for 1 second with ease-out. */
}
.slide-right:hover {
margin-left: 150px; /* The element will move to the right on hover. */
}
Explanation
Hovering over the .slide-right element causes it to move 150 pixels to the right. The ease-out timing makes the initial movement fast, with a gradual slowdown as it reaches its new position.
Example 4: Font-Size Growth
/* This example applies the ease-out timing function to the font-size property. */
.text-grow {
font-size: 16px;
transition: font-size 0.8s ease-out; /* Font-size will transition for 0.8 seconds with ease-out. */
}
.text-grow:hover {
font-size: 32px; /* The font size will double on hover. */
}
Explanation
When hovered, the font size of the .text-grow element doubles. The ease-out function ensures that the text grows quickly at first and then smoothly settles into its larger size.
Example 5: Transform Scale
/* This example demonstrates the ease-out timing function with the transform: scale() property. */
.scale-up {
transition: transform 1.2s ease-out; /* The transform property will transition for 1.2 seconds with ease-out. */
}
.scale-up:hover {
transform: scale(1.5); /* The element will scale up by 50% on hover. */
}
Explanation
This code scales the .scale-up element to 1.5 times its original size on hover. The ease-out function provides a dynamic effect where the scaling is initially rapid and then slows down as it reaches the final size.