Home CSS Reference @keyframes

@keyframes

property CSS3

Defines the intermediate steps in a CSS animation sequence.

Syntax

@keyframes name { from { } to { } }

Example

css

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.pulsing { animation: pulse 2s ease-in-out infinite; }
.sliding { animation: slideIn 0.4s ease; }

animation

transform