Um quadro-chave marca a aparência que uma animação deve ter em um momento específico. Em uma animação web, você pode definir uma aparência no início e outra no fim. O navegador completa o movimento entre esses pontos.
Imagine desenhar uma bola no ponto mais alto e no mais baixo de um salto; as imagens intermediárias criam o movimento. No CSS, a regra `@keyframes` descreve esses instantes e pode incluir também um ponto intermediário. Quadros-chave não precisam ser desenhos reais: podem descrever mudanças de tamanho, cor, posição ou outras propriedades visuais.