CSS Animation and Behaviors in Blend for VS2013

Blend for Visual Studio 2013 adds some great new features for development of JavaScript-based Windows 8 apps. In this blog post, we'll look at two of those features: CSS Animations and Behaviors.
NOTE: A video walkthrough is available to accompany this post.

CSS Animations allow developers to animate the values of CSS properties using keyframes. These animations can be difficult to write because it is hard to visualize an animation just by writing out CSS in a text editor.
Let's use Blend to create an animation using transforms. The animation will have a "2.5D effect" - because it uses simple transforms on 2D objects to create a 3D-like effect.

1. Open Blend for Visual Studio 2013 and create a new HTML (Windows Store) app, using the Blank App template:
   
   
   
   
2. Let's add in an image to animate. From the Projects Panel, expand the images subfolder and drag the image "logo.scale-100.png" to the artboard.
   
   
   
3. With the img element selected, go to the CSS Properties Panel and ensure that "inline style" is selected. Then expand the Animation category. (note: normally it is a best practice to create a class for the animation instead of using an inline style, but there are issues with this in the Blend 2013 RC Build - these issues will be fixed by RTM).
   
   
   
   
   
4. In the Animation Pane, click the "+" button to add in a new animation. Enter the following values:
   
   duration: 1s
   iteration-count: infinite
   play-state: running
   
   
   
   
5. Next, we can record the actual animation key frames. Click the "Edit Animation" button in the Animation Pane. At the bottom of the Blend workspace, you will see a timeline, and at the top of the artboard you will see a message "Animation recording is on."
   
   Note that any changes you make to the CSS properties for the selected object will record a key frame in the animation. If at any time you want to stop keyframe recording, just click the red "record" button to the left of this message.
   
   
6. In the Animation Pane, advance the yellow marker to the 1 second mark.
   
7. In the CSS Properties Panel, expand the Transform Category and add a new Skew Transform using the dropdown selection:
   
   
   
   
8.  Set the Skew x to 90deg and the y to 45deg.
   
9. Add a second transform, this time select a Translate Transform using the dropdown selection.
   
   Set the Translate x property to 500px and the y property to 300px.
   
10. In the Animation pane, click the "play" button to preview the animation. You can also "scrub" the animation by moving the timeline.
    
11. To stop recording the animation, click the "Animation recording is on" button at the top of the artboard.
    
12. Run the app by hitting F5, and witness the css animation!

Adding Behaviors
Now that we have an animation, let's add some interactivity to it so that the user clicks the image to start the animation. We can do this without writing any code using Behaviors.

1. First, let's change our animation so that it is in the Paused state. With the image selected, go to the CSS Properties Panel and expand the Animation category. Set the play-state property of the animation to "paused."
   
   
2. Set the iteration-count property to "1" so that the animation only executes once.
   
   
3. Go to the Assets Panel and select the Behaviors category. Then select the SetStyleAction.
   
   
4. Drag the SetStyleAction onto the element on the artboard.
   
   
5. In the CSS Properties Panel, expand the Behaviors Category and you will see a new EventTriggerBehavior and SetStyleAction have been added. Select the EventTriggerBehavior and Note that the default event is "click" - so this action will be executed when the user clicks it.
   
   
6. Select the SetStyleAction and set the styleProperty to "animation-play-state" and the styleValue to "running"
   
   
7. Run the app by pressing F5. Then click the img to execute the SetStyleAction and run the animation.

Summary
In this post, we saw how to get started with two new compelling features of Blend for Visual Studio 2013 - CSS Animations and Behaviors. One limitation of using Blend for HTML/CSS design is that the tool is geared solely towards Windows Store apps. Hopefully someday we will see Blend support other project types such as ASP.NET Web projects, and adhere to more open JavaScript frameworks, bec ause these are great features for web development!