Focus jest wtedy, gdy na dany element przetabuje się przy pomocy klawisza Tab na klawiaturze. Na części systemów operacyjnych i przeglądarek dzieje się też tak wtedy, gdy dany przycisk się kliknie.
Natomiast :active to sam moment klikania, czyli wtedy, gdy trzymasz wciśnięty przycisk myszy (lub spację) i kończy się wtedy, gdy puszczasz ten przycisk (lub spację).
Innymi słowy: focus jest stały i oznacza, że interakcja z klawiatury (np. naciśnięcie spacji) wykona akcję na danym przycisku. Natomiast :active oznacza, że ta akcja na tym przycisku jest właśnie wykonywana.
PoC: https://jsfiddle.net/Comandeer/20m3v17g/
Edit: warto tutaj zauważyć, że w przypadku przycisków aktywacja z poziomu klawiatury następuje po naciśnięciu spacji lub Entera, ale już np. w przypadku linków – tylko przy pomocy Entera.