@keyframes names a sequence of style snapshots at percentages (from = 0%, to = 100%) that the animation property plays. Offsets can share a block, and properties missing from a keyframe interpolate from the element's own value.
@keyframes pulse {
50% { transform: scale(1.15); background: gold; }
}
.badge { animation: pulse 1.2s ease-in-out infinite; }!important inside a keyframe is ignored. Timing, fill modes and scroll-driven timelines are in Keyframe Animations.