Keyframes

The potential behind CSS animations is huge but the syntax makes them very time consuming to write. Keyframes is an attempt at a timeline-based CSS animation editor.

How to use Keyframes

Container properties

Drag the Perspective slider to change the animation perspective (for 3D transforms).

Element properties

Changes are applied onselect or onblur.

Keyframe properties

Click the circles on the timeline to select each keyframe. Change a property and hit Enter to apply.

Import

There is limited support for importing animations into the timeline from the textarea.

How to add new keyframes

Go to the Keyframes tab. Enter a value in the Pos box. Hit enter.

Browser support

Keyframes works in recent versions of Safari and Chrome. That's it!

Try it out!

#container { -webkit-perspective: 500; } #element { -webkit-animation-name: myanimation; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes myanimation { 50% { left: 75%; top: 5%; -webkit-transform: rotateY(360deg); } 0% { left: 5%; top: 5%; } 100% { left: 5%; top: 5%; } }