CSS Animations Reference

transition: all 0.3s ease; # shorthand
transition-property: background-color; # what to animate
transition-duration: 0.5s; # animation time
transition-timing-function: ease-in-out; # speed curve
transition-delay: 0.2s; # wait before start
transition: width 2s, height 4s; # multiple properties

@keyframes slide {
  0% { left: 0; } # start position
  50% { left: 100px; } # middle position
  100% { left: 200px; } # end position
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

animation-name: slide; # keyframe name
animation-duration: 2s; # animation time
animation-timing-function: ease; # speed curve
animation-delay: 1s; # start delay
animation-iteration-count: infinite; # repeat forever
animation-direction: alternate; # reverse on repeat
animation-fill-mode: forwards; # keep end state

ease # slow start, fast, slow end
linear # constant speed
ease-in # slow start
ease-out # slow end
ease-in-out # slow start and end
cubic-bezier(0.1, 0.7, 1.0, 0.1) # custom curve
steps(4, end) # stepped animation

# Complete animation in one line
animation: slide 2s ease-in-out 1s infinite alternate;

# Multiple animations
animation: 
  slide 2s ease-in-out,
  fade 1s linear;

# Pause animation
animation-play-state: paused;