Style sheet animation creation tool with timeline interface

Abstract

Techniques are provided for automatically creating style sheet animations including keyframe information. In some embodiments, a style sheet animation creation tool with a timeline-based interface is provided. By interacting with the user-interface, the user can select a point on a timeline for an animation object to add a keyframe to an animation of the animation object. In response to the user's selection of the keyframe time point, the style sheet animation creation tool displays an interactive keyframe indicator on the timeline to indicate the selected time point. With the style sheet animation creation tool, a user can generate a style sheet animation without having to author style sheet language text statements by hand.

1 . A method comprising:
 concurrently displaying a plurality of animation object timelines for a corresponding plurality of animation objects, one animation object timeline for each of the plurality of animation objects;   in response to obtaining selection of a first point along a first animation object timeline of the plurality of animation object timelines, displaying a first keyframe indicator on the first timeline at the first selected point, the first keyframe indicator representing a first keyframe of a style sheet animation of the animation object of the plurality of animation objects corresponding to the first timeline;   in response to obtaining selection of a second point along the first timeline, displaying, concurrently with the first keyframe indicator, a second keyframe indicator on the first timeline at the second selected point, the second keyframe indicator representing a second keyframe of the style sheet animation of the animation object corresponding to the first timeline;   determining, based on the first selected point, first timing information that indicates a first point in time during a duration of the style sheet animation of the animation object corresponding to the first timeline;   determining, based on the second selected point, second timing information that indicates a second point in time during the duration of the style sheet animation of the animation object corresponding to the first timeline;   generating style sheet language text representing the style sheet animation of the animation object corresponding to the first timeline, the style sheet language text comprising a declaration of the first keyframe and a declaration of the second keyframe;   wherein the declaration of the first keyframe comprises the first timing information;   wherein the declaration of the second keyframe comprises the second timing information;   wherein the method is performed by a computing device.   
     
     
         2 . The method of  claim 1 , further comprising:
 in response to obtaining the selection of the first point, associating the first keyframe with a default animation timing function.   
     
     
         3 . The method of  claim 1 , wherein the declaration of the first keyframe further comprises a specification of an animation timing function. 
     
     
         4 . The method of  claim 1 , wherein the first keyframe indicator is interactive, the method further comprising:
 in response to input directed to the first keyframe indicator, displaying a panel that allows a user to specify timing information and an animation timing function to associate with the first keyframe.   
     
     
         5 . The method of  claim 1 , wherein the style sheet language text, when processed by a style sheet animation processor, causes the animation object to be animated in accordance with the first keyframe declaration and the second keyframe declaration. 
     
     
         6 . The method of  claim 1 , further comprising:
 in response to the third input, generating markup language text that represents the animation object.   
     
     
         7 . (canceled) 
     
     
         8 . The method of  claim 1 , further comprising:
 generating additional style sheet language text that represents an animated state of the animation object at the first keyframe.   
     
     
         9 . The method of  claim 1 , further comprising displaying a control which, when activated, causes a preview of the style sheet animation to be presented. 
     
     
         10 . A method comprising:
 displaying a timeline for a corresponding animation object of a style sheet animation;   in response to obtaining selection of a first point along the timeline,
 displaying a first keyframe indicator on the timeline at the first selected point, the first keyframe indicator representing a first keyframe of the style sheet animation, and 
 automatically associating the first keyframe with a default easing function, wherein the default easing function is selected from the group consisting of ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier; 
   in response to obtaining selection of a second point along the timeline, displaying a second keyframe indicator on the timeline at the second selected point, the second keyframe indicator representing a second keyframe of the style sheet animation;   determining, based on the first selected point, first timing information that indicates a first point in time during a duration of the style sheet animation;   determining, based on the second selected point, second timing information that indicates a second point in time during the duration of the style sheet animation;   responsive to third input, generating style sheet language text comprising a declaration of the first keyframe and a declaration of the second keyframe;   wherein the declaration of the first keyframe comprises the first timing information and a specification of the default easing function;   wherein the declaration of the second keyframe comprises the second timing information;   wherein the method is performed by a computing device.   
     
     
         11 . One or more non-transitory computer-readable media storing instructions which, when executed by one or more processors, cause performance a method comprising:
 concurrently displaying a plurality of animation object timelines for a corresponding plurality of animation objects, one animation object timeline for each of the plurality of animation objects;   in response to obtaining selection of a first point along a first animation object timeline of the plurality of animation object timelines, displaying a first keyframe indicator on the first timeline at the first selected point, the first keyframe indicator representing a first keyframe of a style sheet animation of the animation object of the plurality of animation objects corresponding to the first timeline;   in response to obtaining selection of a second point along the first timeline, displaying, concurrently with the first keyframe indicator, a second keyframe indicator on the first timeline at the second selected point, the second keyframe indicator representing a second keyframe of the style sheet animation of the animation object corresponding to the first timeline;   determining, based on the first selected point, first timing information that indicates a first point in time during a duration of the style sheet animation of the animation object corresponding to the first timeline;   determining, based on the second selected point, second timing information that indicates a second point in time during the duration of the style sheet animation of the animation object corresponding to the first timeline;   generating style sheet language text representing the style sheet animation of the animation object corresponding to the first timeline, the style sheet language text comprising a declaration of the first keyframe and a declaration of the second keyframe;   wherein the declaration of the first keyframe comprises the first timing information;   wherein the declaration of the second keyframe comprises the second timing information.   
     
     
         12 . The one or more non-transitory computer-readable media of  claim 11 , wherein the determining the first timing information comprises determining the first timing information in response to obtaining the selection of the first point along the timeline. 
     
     
         13 . The one or more non-transitory computer-readable media of  claim 11 , wherein determining the first timing information comprises determining the first timing information in response to input requesting generation of the style sheet language text. 
     
     
         14 . The one or more non-transitory computer-readable media of  claim 11 , wherein displaying the timeline comprises displaying the timeline aligned in a row with a textual identifier of the animation object. 
     
     
         15 . The one or more non-transitory computer-readable media of  claim 11 , wherein the first timing information is a percentage of the duration of the style sheet information. 
     
     
         16 . The one or more non-transitory computer-readable media of  claim 11 , the method further comprising:
 in response to obtaining the selection of the first point, associating the first keyframe with a default animation timing function.   
     
     
         17 . The one or more non-transitory computer-readable media of  claim 16 , wherein the default animation timing function is selected from the group consisting of ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier. 
     
     
         18 . The one or more non-transitory computer-readable media of  claim 11 , wherein the declaration of the first keyframe further comprises a specification of an animation timing function. 
     
     
         19 . The one or more non-transitory computer-readable media of  claim 18 , wherein the animation timing function is selected from the group consisting of ease, linear, ease-in, ease-out, ease-in-out and cubic-bezier. 
     
     
         20 . The one or more non-transitory computer-readable media of  claim 11 , wherein the first keyframe indicator is interactive, and the method further comprises:
 in response to input directed to the first keyframe indicator, displaying a panel that allows a user to specify timing information and an animation timing function to associate with the first keyframe.   
     
     
         21 . The one or more non-transitory computer-readable media of  claim 11 , wherein the style sheet language is a Cascading Style Sheets-based language. 
     
     
         22 . The one or more non-transitory computer-readable media of  claim 11 , wherein the style sheet language text, when processed by a style sheet animation processor, causes the animation object to be animated in accordance with the first keyframe declaration and the second keyframe declaration. 
     
     
         23 . The one or more non-transitory computer-readable media of  claim 22 , wherein the style sheet animation processor is a web browser. 
     
     
         24 . The one or more non-transitory computer-readable media of  claim 11 , wherein the animation object is selected from the group consisting of box, circle, line, text, image, and container. 
     
     
         25 . The one or more non-transitory computer-readable media of  claim 11 , the method further comprising:
 generating markup language text that represents the animation object.   
     
     
         26 . The one or more non-transitory computer-readable media of  claim 25 , wherein the markup language text comprises a markup language division element that represents the animation object. 
     
     
         27 . The one or more non-transitory computer-readable media of  claim 11 , the method further comprising:
 generating additional style sheet language text that represents an animated state of the animation object at the first keyframe.   
     
     
         28 . The one or more non-transitory computer-readable media of  claim 27 , wherein the additional style sheet language text comprises one or more style sheet property declarations representing the animated state of the animation object at the first keyframe. 
     
     
         29 . The one or more non-transitory computer-readable media of  claim 11 , the method further comprising displaying a control which, when activated, causes a preview of the style sheet animation to be presented. 
     
     
         30 . The one or more non-transitory computer-readable media of  claim 11 , wherein selection of the first point and selection of the second point is made by a user using a pointing device.