Home CSS Reference animation

animation

property CSS3

Shorthand for all animation properties. Requires a @keyframes rule defining the animation.

Syntax

animation: name duration timing iteration direction;

Example

css

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeIn 0.5s ease forwards;
}

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

.loader {
    animation: spin 1s linear infinite;
}

transition-timing-function

@keyframes