CSS Animations Cheat Sheet

Transitions

transition: property duration timing-function delay;
transition: all 0.3s ease;
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

Keyframes

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

Animation

animation: name duration timing-function delay iteration-count direction;
animation: slide 2s ease-in-out infinite alternate;

Transform

transform: translate(10px, 20px);
transform: rotate(45deg);
transform: scale(1.5);