CSS3 Keyframes Animation Generator

Here is brief explanation for quick start. Soon this section will be updated with more detailed description:

• As this is raw beta we recommend to use webkit browsers(Chrome/Safari)
• To clear all timeframes and set Start/End frames into original state you can use Reset button in Timeline section
• To define main animation(global) properties use Animation properties box
• Click on top of timeline strip to add keyframes for selected position
• If timeline pointer in postion without keyframe and it's state changed, keyframe will be added automatically
• You can remove keyframe by clicking Remove button in Frame Properties box or by pressing DELETE key
• Boxes can be minimized/maximized by clicking on Box title
• Start/End keyframes are fixed and can not be removed
• Drag keyframes to change position(order) on timeline
• You can drag timeline pointer to see rectangle state at specified time frame
• You can choose around what point to rotate your element ( in css code - transform-origin property) by using Rotation point selection control
• You can switch between frames in Keyframes block or using next/previous button in Timeline block
• Press play button to play animation
• You can drag/scale/rotate rectangle in preview area or use arrows keys to change rectangle position, properties will be changed automatically
• Copy code button will copy generated code to clipboard
• For selected keyframe you can edit object state in Frame Properties box
• To "lock/unlock" property (left,top, etc) for selected frame toggle little yellow rectangle on the right side of property