The ease timing function is the default value for the animation-timing-function and transition-timing-function properties in CSS. It creates an effect where the animation or transition starts slowly, accelerates in the middle, and then slows down towards the end. This creates a more natural-looking motion compared to a linear speed.
Example 1: Transitioning Width with ease
/* This div will change its width when you hover over it */
.box {
width: 100px;
height: 100px;
background-color: steelblue;
/* Specifies the transition effect */
transition: width 2s ease;
}
/* On hover, the box will expand to 300px */
.box:hover {
width: 300px;
}
Explanation:
This code applies a transition to the width property of the .box element. When a user hovers over the box, its width changes from 100px to 300px over two seconds, following the ease timing function for a smooth start and finish.
Example 2: Animating Position with ease
/* This div will move from left to right */
.mover {
width: 50px;
height: 50px;
background-color: tomato;
position: relative;
/* Defines the animation properties */
animation-name: slide-in;
animation-duration: 3s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
/* Keyframes for the sliding animation */
@keyframes slide-in {
from {
left: 0px;
}
to {
left: 200px;
}
}
Explanation:
The .mover element is animated using the slide-in keyframes. The animation-timing-function is explicitly set to ease, causing the element to move 200 pixels to the right with a slow start, a faster middle, and a slow end over a three-second duration.
Example 3: Changing Opacity and Color
/* This button will fade in color and opacity */
.button {
padding: 15px 30px;
background-color: #f0f0f0;
color: #333;
border: none;
/* Applying transition to multiple properties */
transition: background-color 1s ease, color 1s ease;
}
/* The button's style on hover */
.button:hover {
background-color: #333;
color: #fff;
}
Explanation:
When hovering over the .button, both the background-color and color properties transition over one second. The ease function ensures this change happens gracefully, with a noticeable acceleration and deceleration in the color transformation.
Example 4: Rotating an Element
/* An icon that rotates on hover */
.icon {
font-size: 50px;
display: inline-block;
/* Sets the transition for the transform property */
transition: transform 1.5s ease;
}
/* Rotates the icon 360 degrees on hover */
.icon:hover {
transform: rotate(360deg);
}
Explanation:
This example demonstrates the ease timing function on the transform property. When the user's cursor is over the .icon, it completes a full 360-degree rotation. The rotation starts and ends slowly, making the effect feel smooth and polished.
Example 5: Scaling a Card Component
/* A card that scales up on hover */
.card {
width: 200px;
height: 250px;
background-color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
/* Defines the transition for the scaling effect */
transition: transform 0.5s ease;
}
/* Scales the card by 5% on hover */
.card:hover {
transform: scale(1.05);
}
Explanation:
Here, the .card element scales up slightly when hovered over. The ease function applied to the transform property makes this scaling effect feel dynamic and responsive, rather than abrupt and linear.