Animations

Animations in CSS can be done through various techniques, such as transition, transform, and keyframes. Each of these CSS properties has its own set of options and can be combined to create seamless, interactive, and dynamic web designs.

transition & transform

transition allows an element to change from one style to another over a specific period of time. It is primarily used for animating changes in an element's state. The key aspect of transitions is that they smoothly interpolate between initial and final styles. transform allows us to change the position, size, and orientation of an element without affecting its surrounding content. It is often used in combination with transitions to create more complex animations.

In summary, transform is about the immediate change in the element's appearance, while transition is about how those changes are animated over time.

Transition options

ease Starts slowly, speeds up, then slows down again (default).
linear Same speed throughout.
ease-in Starts slow, then speeds up.
ease-out Starts fast, then slows down.
ease-in-out Starts slow, speeds up, and then slows down again.
cubic-bezier() Defines a custom easing function using four numeric parameters.

Common transform functions

rotate(deg) Rotates an element by a specified number of degrees.
scale(x, y) Scales an element horizontally (x) and vertically (y).
translate(x, y) Moves an element by a specified distance along the x and y axes.
skew(x, y) Skews an element along the x and y axes.
matrix(a, b, c, d, e, f) A 2D transformation function that defines a transformation using a matrix. 

/* The button, when hovered, will smoothly change its background color from blue to red and scale up 1.2 times (20% larger). */
button {
    background-color: blue;
    color: white;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: red;
    transform: scale(1.2);
}
                                    

/* The .box element will rotate by 45 degrees and scale up 1.5 times when hovered. */
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 0.5s ease;
}

.box:hover {
    transform: rotate(45deg) scale(1.5);
}

keyframes

@keyframes provides a way to create more complex, multi-step animations. They allow us to define various points (or "keyframes") during an animation, specifying the style at each point.

Keyframe options

animation-name The name of the animation (defined with @keyframes).
animation-duration The total duration of the animation (e.g., 3s).
animation-timing-function The speed curve of the animation (e.g., linear, ease-in-out).
animation-delay The time to wait before starting the animation (e.g., 3s).
animation-iteration-count The number of times the animation should run (e.g., infinite, 3).
animation-direction Defines the direction of the animation cycle (e.g., normal, reverse, alternate). Alternate means alternating between forward and reverse.
animation-fill-mode Defines how the styles should be applied before or after the animation (e.g., forwards, backwards). 

/* The .box element will move from left to right while changing color from blue to green and finally to red. 
The animation will take 3 seconds, repeat infinitely, and use an ease-in-out timing function. */
@keyframes move {
    0% {
        left: 0; /* this requires setting the element to position absolute or relative. */
        background-color: blue;
    }
    50% {
        left: 50%;
        background-color: green;
    }
    100% {
        left: 100%;
        background-color: red;
    }
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 3s ease-in-out infinite;
}

Combining transitions, transforms, and keyframes


/* The button bounces up and down using a keyframe animation while also scaling up and changing colors when hovered. */
@keyframes bounce {
    0% {
        transform: translateY(0);
        background-color: blue;
    }
    50% {
        transform: translateY(-20px);
        background-color: green;
    }
    100% {
        transform: translateY(0);
        background-color: red;
    }
}

button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    animation: bounce 2s infinite;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

button:hover {
    transform: scale(1.1);
    background-color: purple;
}