Transitions animate a change between two states, like a hover. Keyframe animations run on their own and can have many steps.

Transition

.lotgrafix-button {
    background: orangered;
    transform: translateY( 0 );
    transition: background 0.3s ease, transform 0.3s ease;
}

.lotgrafix-button:hover {
    background: #cc3700;
    transform: translateY( -3px );
}

Transition properties

• transition-property: which properties animate.
• transition-duration: how long it takes.
• transition-timing-function: the speed curve, like ease, linear, ease-in-out.
• transition-delay: wait time before it starts.

Keyframe animation

@keyframes lotgrafix-fade-up {
    from {
        opacity: 0;
        transform: translateY( 20px );
    }
    to {
        opacity: 1;
        transform: translateY( 0 );
    }
}

.lotgrafix-card {
    animation: lotgrafix-fade-up 0.6s ease forwards;
}

Animation properties

• animation-name: the name of the keyframes.
• animation-duration: length of one cycle.
• animation-iteration-count: number of repeats, or infinite.
• animation-direction: normal, reverse, alternate.
• animation-fill-mode: use forwards to keep the final state.

Loading spinner

@keyframes lotgrafix-spin {
    to { transform: rotate( 360deg ); }
}

.lotgrafix-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top-color: orangered;
    border-radius: 50%;
    animation: lotgrafix-spin 0.8s linear infinite;
}

Performance tip

Animate transform and opacity whenever possible. They run on the GPU and avoid layout recalculations, unlike width, height or top.