This tutorial provides a walkthrough for adding CSS transitions to the game cards for your app.

About this series: this tutorial series can help you get started with basic design tasks in Blend 5 for Windows Developer Preview. When you complete all the steps of this tutorial series, you will have created a lightweight, dynamic version of the memory game commonly referred to as “Concentration.” In the game, a number of cards are laid face down. The objective of the game is to turn over pairs of matching cards until all of the matching pairs have been revealed.

Posts in this Series:

Blend Tutorial Part 1: Design Your First Metro Style App with JavaScript, HTML5, CSS
Blend Tutorial Part 2: Create the Project—Memory Game
Blend Tutorial Part 3: Add a Style Sheet—Memory Game
Blend Tutorial Part 4: Create a Flexible Layout—Memory Game
Blend Tutorial Part 5: Align Content to The Grid—Memory Game
Blend Tutorial Part 6: Style the Game Board—Memory Game
Blend Tutorial Part 7: Style the Cards—Memory Game
Blend Tutorial Part 8: Add CSS Transitions — Memory Game [This post.]
Blend Tutorial Part 9: Build and Run Your App—Memory Game

Add CSS transitions

The transitions between the openCard state and the closedCard state are instantaneous. You can add more style to the app by adding a style that eases the transition between these two states, giving a more fluid feel to the app.

To add a CSS transition

1. In the Styles panel, click .gameItem img.
2. In the CSS Properties panel, expand the Transition category. The CSS transition editor appears.
   

3. In the CSS transition editor, click Add and then select opacity from the Properties drop-down list.
   

4. In the timeline, move the slider to .8 seconds.
   

5. Add an easing function by clicking the ease function box, and select ease-in-out.
   

6. To see the CSS transition, click Interactive mode , and begin playing the game. The card transitions from 0% opacity to 100% opacity in .8 seconds.

The next topic: Blend Tutorial Part 9: Build and Run your App—Memory Game.