📖 Transitions, Transformations and Animations

Transitions
Best for simple, two-state changes (e.g., hover effects).
Transformations
Use for altering appearance without animations (e.g., rotation, scaling).
Animations
Ideal for multi-step or looping effects.

Transitions

Transitions control the timing of changes to CSS properties during a change to the specified element.

Basic Format

transition: property duration timing-function delay;
Property
Any CSS property to be changed (required).
Duration
How long the transition takes, in seconds (s) or milliseconds (ms) (required).
Timing Function
Describes how speed changes during the transition. Default is "ease" (optional).
Delay
When the transition begins. Default is 0 (optional).

Common Use Cases

    :hoverMouse or pointing device is over an element (not functional on touchscreens).:focusElement is ready to receive input.:activeElement is currently being used (e.g., button pressed but not released).
Example: Hover Effect
div:hover { background-color: yellow; }
div {
    transition: background-color 2s;
}

Transformations

Transformations alter how an element appears on the screen and can be used with transitions for smooth effects.

Basic Format

selector {
    transform: transform-type(attributes);
}
Example: Rotate and Scale

Common Transform Types

rotate(angle)
Rotates the element clockwise by the specified angle (e.g., 45deg).
scale(x, y)
Scales the element by the specified x and y factors. If y is omitted, both directions use x.
translate(x, y)
Moves the element horizontally by x and vertically by y.
skew(x-angle, y-angle)
Skews the element horizontally and vertically by the given angles.

Animations

CSS animations allow for complex, multi-step animations using the @keyframes rule.

Key Concepts

Animations can be applied to any CSS property, enabling dynamic visual effects.

@keyframes fade {
    0% { opacity: 1; }
   50% { opacity: 0; }
  100% { opacity: 1; }
}

div {
    animation: fade 10s infinite;
}
Example: Moving and Fading Elements
Animate Fade In and Out

This image fades in and out elements every 10 seconds (continuously) using animation.

Sample Image

This example makes a div element gradually move and fade in/out.

@keyframes moveFade {
    0% { transform: translateY(0); opacity: 1; }
   50% { transform: translateY(50px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

div {
    animation: moveFade 5s infinite;
}

Animation Properties

animation-name
Name of the animation defined in the @keyframes rule (required).
animation-duration
How long the animation takes to complete one cycle (e.g., 5s) (required).
animation-timing-function
Defines the animation speed curve (e.g., ease, linear, cubic-bezier).
animation-iteration-count
How many times the animation will repeat (e.g., 1, infinite).
animation-direction
Determines if the animation plays in reverse or alternates (e.g., normal, alternate).
Example: Square Animation

The next example is from W3 schools. They make a colored square move around in square pattern while changing colors.

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: example 4s infinite;
}

@keyframes example {
    0%   { left: 0px; top: 0px; }
   25%  { left: 200px; top: 0px; }
   50%  { left: 200px; top: 200px; }
   75%  { left: 0px; top: 200px; }
  100%  { left: 0px; top: 0px; }
}