Keyframes ist eine Erweiterung für Chrome (und weitere auf Chromium basierende Browser). Diese erlaubt es auf eine sehr einfache Art @keyframe zu erstellen.
Im ersten Schritt klickt man auf die Erweiterung. Dann muss man ein Element auswählen, welches man animieren möchte.
Man wählt beliebige Punkte auf der Zeitachse aus und definiert für diese die gewünschten Styles. Das kann man beliebig granular machen.
Hat man alle gewünschten Zwischenschritte angelegt kann man sich dann mit einem Klick auf Show Output CSS das Ergebnis ansehen und anschließend in das eigene Projekt hineinkopieren.