The linear timing function specifies that an animation or transition progresses at a constant speed from start to end. There is no acceleration or deceleration, making the effect uniform and steady throughout its duration.
Example 1: Linear Motion
/* This div will be our animated element. */
.box {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
/* Define the animation properties */
animation-name: slide-right;
animation-duration: 4s;
/* Set the timing function to linear for constant speed */
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Define the keyframes for the movement */
@keyframes slide-right {
from {
left: 0;
}
to {
left: 300px;
}
}
Explanation This code creates a blue square that moves 300 pixels to the right. The animation-timing-function: linear; ensures the box travels at a consistent, even speed without speeding up or slowing down.
Example 2: Constant Rotation
/* A simple loading spinner element. */
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
/* Define the animation properties */
animation-name: spin;
animation-duration: 1.5s;
/* The linear timing function creates a smooth, continuous spin. */
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Define the rotation keyframes */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Explanation The linear value causes the spinner to rotate at a steady pace, which is ideal for creating a seamless and non-jarring loading animation. The rotation speed never changes.
Example 3: Uniform Opacity Fade
/* Style for an image that will fade in on hover. */
.fade-in-image {
width: 200px;
opacity: 0.5;
/* Define the transition for the opacity property */
transition-property: opacity;
transition-duration: 1s;
/* Use linear to ensure the fade happens at a constant rate. */
transition-timing-function: linear;
}
/* On hover, the image becomes fully opaque. */
.fade-in-image:hover {
opacity: 1;
}
Explanation When you hover over the image, its opacity changes from 0.5 to 1. The transition-timing-function: linear; ensures the image becomes clearer at a constant, predictable rate.
Example 4: Steady Background Color Change
/* A button that changes color on hover. */
.color-change-btn {
padding: 15px 30px;
border: none;
background-color: #2ecc71;
color: white;
/* Specify the transition effect for the background-color */
transition: background-color 2s linear;
}
/* The new background color on hover. */
.color-change-btn:hover {
background-color: #e74c3c;
}
Explanation This code transitions a button's background color from green to red upon hovering. Using linear, the color shifts at a steady, even pace through all the intermediate shades.
Example 5: Combined Linear Transitions
/* An element that will scale and fade out simultaneously. */
.grow-and-fade {
width: 100px;
height: 100px;
background-color: #9b59b6;
opacity: 1;
/* Apply linear transition to both transform and opacity properties. */
transition: transform 2s linear, opacity 2s linear;
}
/* Trigger the transition on hover. */
.grow-and-fade:hover {
transform: scale(1.5);
opacity: 0;
}
Explanation On hover, this purple square both grows in size and fades out. By applying a linear timing function to both transform and opacity, both effects proceed at a constant, synchronized speed.