The ease-in-out timing function defines a transition that starts slowly, accelerates through the middle, and then decelerates towards the end. This creates a smooth and natural-feeling animation for elements appearing and disappearing or changing states. It is often used to create sophisticated and polished user interface effects.
Example 1: Opacity Transition
/* This div will fade in and out smoothly */
.fade-box {
width: 100px;
height: 100px;
background-color: #3498db;
opacity: 0.1;
/* Specifies the transition effect */
transition: opacity 2s ease-in-out;
}
/* On hover, the box becomes fully visible */
.fade-box:hover {
opacity: 1;
}
Explanation
This code block defines a div that has a low opacity by default. When a user hovers over it, the opacity transitions to 1 over two seconds. The ease-in-out function ensures this fading effect starts gradually, speeds up, and then slows down as it becomes fully opaque.
Example 2: Width Change
/* A simple button that expands on hover */
.expand-button {
width: 150px;
height: 50px;
background-color: #2ecc71;
color: white;
text-align: center;
line-height: 50px;
/* Defines the transition for the width property */
transition: width 1.5s ease-in-out;
}
/* The button's width increases when hovered */
.expand-button:hover {
width: 250px;
}
Explanation
Here, a button's width is set to transition when a user hovers over it. The ease-in-out value causes the button to expand and retract with a smooth, controlled acceleration and deceleration, providing a fluid user experience.
Example 3: Rotation Transformation
/* An icon that rotates on hover */
.rotate-icon {
font-size: 50px;
color: #e74c3c;
/* Sets the transition for the transform property */
transition: transform 1s ease-in-out;
}
/* Rotates the icon 360 degrees on hover */
.rotate-icon:hover {
transform: rotate(360deg);
}
Explanation
This example applies a rotation effect to an icon. The ease-in-out timing function makes the rotation start slowly, spin faster, and then gently come to a stop, avoiding an abrupt or mechanical-looking motion.
Example 4: Color Change
/* A background that changes color smoothly */
.color-shift {
width: 100%;
height: 100px;
background-color: #9b59b6;
/* Applies the transition to the background-color property */
transition: background-color 3s ease-in-out;
}
/* Changes the background color on hover */
.color-shift:hover {
background-color: #1abc9c;
}
Explanation
This CSS demonstrates a background color change. With ease-in-out, the color shift doesn't happen at a constant speed; instead, it provides a more organic transition between the two colors over three seconds.
Example 5: Font Size Growth
/* Text that grows in size on hover */
.text-grow {
font-size: 18px;
font-family: Arial, sans-serif;
/* Defines the transition for the font-size property */
transition: font-size 1.2s ease-in-out;
}
/* Increases the font size on hover */
.text-grow:hover {
font-size: 28px;
}
Explanation
In this final example, the font size of a text element animates on hover. The ease-in-out function creates a pleasing effect where the text seems to smoothly "breathe" or grow and then shrink back with a gentle easing at both ends of the transition.