Animation panel (HTML)
In the Animation panel in Blend, you can create and edit CSS animations in a timeline view, and view animations by playing them on the design surface.
You can view and edit animations that you have created in your .css and .html files. You can also create new animations in the timeline, and your files are automatically updated.
The Animation panel as it appears when you view a CSS3 animation
.png "Blend CSS3 Animation panel")
.png "B1_1") |
Style rule Displays the style rule currently loaded in the Animation panel. |
.png "B1_2") |
Animation list Shows the animations defined for the style rule. |
.png "B1_3") |
Animated properties Displays a list of the animated properties. |
.png "B1_4") |
Create, edit, or close an animation The options change based on the style rule definition:
|
.png "B1_5") |
Add new or existing animation Use to add a new or existing @keyframes animation to the animation list. |
.png "B1_6") |
Record mode indicator Indicates when you are recording property changes in a timeline. Tip When in record mode, the record mode indicator also appears in the record bar above the design surface. You can click either indicator to turn animation recording on or off. |
.png "B1_7") |
Animation properties Displays a list of the properties available for the animation. A check mark indicates an applied value for the selected property. Select a different value to apply it to the animation. |
.png "B1_8") |
Playback controls Provides controls that you can use to navigate through the timeline. You can also drag the playhead to navigate through (or scrub) the timeline. |
.png "B1_9") |
Playhead position on the timeline Shows the current location of the playhead in milliseconds (mm:ss.xxx). You can also enter a time value directly in this field to jump to a particular point in time. |
.png "97fa60b9-0caf-4387-9225-b57510d32209") |
Playhead Indicates the current point in time for the animation(s) in the animation list. You can drag the playhead across the timeline to preview the animation. This technique is called scrubbing. |
.png "B1_11") |
Snapping Turns snapping on or off. When snapping is turned on, timeline actions snap to the units on the ruler and to existing keyframes. |
.png "B1_12") |
Keyframe markers Indicates a keyframe property definition at a specific point in time. |
.png "B1_13") |
Timeline composition Displays the animation timeline, including the duration, playhead position, and keyframe markers. You can modify the animation by dragging keyframe markers. |
.png "d839d12c-07a1-4127-a830-4a8e7069f4fe") |
Timeline zoom Sets the zoom resolution of the timeline. Zooming in allows you edit an animation with more detail, and zooming out shows an overview of what is happening over a longer duration. |