Understanding CSS Animation Properties: Transition, Animation, and Transform

CSS provides three main properties for creating motion effects on web pages: transition, animation, and transform. Each serves a distinct purpose: transition requires a trigger (e.g., :hover) to start, animation runs immediately or on demand, and transform is not itself an animation but a fundamental building block for animations.

Transition

The transition property smoothly chenges CSS values over a specified duration when a trigger occurs. The shorthand syntax is transition: property duration timing-function delay;.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            border: 2px solid #2c3e50;
            transition: all 2s ease-in-out 0s;
        }
        .box:hover {
            background-color: #e74c3c;
            transform: scale(1.2) translateX(30px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, when the user hovers over the element, both background color and transform (scale and translate) animate over 2 seconds with an ease-in-out timing function and no delay.

Animation

Unlike transition, animation runs automatically without a trigger. It uses @keyframes to define the stages of the animation.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .ball {
            width: 150px;
            height: 150px;
            background: linear-gradient(45deg, #f39c12, #e74c3c);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        .ball:nth-child(1) { animation: slide 6s linear infinite; }
        .ball:nth-child(2) { animation: slide 6s ease-in infinite; }
        .ball:nth-child(3) { animation: slide 6s ease-out infinite; }

        @keyframes slide {
            0%   { transform: translateX(0); }
            100% { transform: translateX(80%); }
        }
    </style>
</head>
<body>
    <div class="ball">linear</div>
    <div class="ball">ease-in</div>
    <div class="ball">ease-out</div>
</body>
</html>

Here three circles move horizontally using different timing functions (linear, ease-in, ease-out) to demonstrate how the pacing changes. The animation repeats infinitely.

Transform

The transform property modifies the coordinate space of an element. It is not an enimation by itself but is frequently used inside transition or @keyframes. Common 2D transform functions include:

rotate(angle) – rotates the element
scale(x, y) – scales the element
skew(x-angle, y-angle) – skews (tilts) the element
translate(x, y) – moves the element

For example, applying multiple transforms:

transform: rotate(45deg) scale(1.5) translateX(50px);

Note that the order matters – transformations are applied from right to left. transform-origin can change the rotation center (default is 50% 50%).

Tags: css animation transition transform keyframes

Posted on Mon, 20 Jul 2026 17:32:26 +0000 by fierdor

Freaks City

Understanding CSS Animation Properties: Transition, Animation, and Transform

Hot Tags