Microsoft 70-480: Create an animated and adaptive UI

Exam Objectives

Animate objects by applying CSS transitions; apply 3-D and 2-D transformations; adjust UI based on media queries (device adaptations for output formats, displays, and representations); hide or disable controls

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 4

Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 2

Advanced Windows Store App Development with HTML5 Jump Start - Module 4, 49min mark

MSDN - CSS3 Effects, Transitions and Animations

MSDN - Intro to Transitions, Intro to Animations

CSS-Tricks Almanac: transform, animation, transition

w3.org - CSS Transitions, CSS Transform, CSS Animation

Disable a textbox using CSS - Stackoverflow
MozDN - CSS media queries
w3.org - Media Queries spec
O'Reilly Webcast: HTML5 and CSS3 Responsive Web Design

CSS Transitions

The W3C spec for transitions defines  the following transition properties:

• transition (MozDN) - This is the shorthand property for the properties below.
• transition-property (MozDN) - specifies which properties are to be transitioned. If you specified "width", only width would be transitioned; all other changes in style would happen immediately (unless they were specified with a seperate transition.
• transition-duration (MozDN) - How long it takes the transition animation to finish. Can be specified in seconds (s) or milliseconds (ms).
• transition-timing-function (MozDN) - Controls how the animation progresses. This progress can be thought of as following a curve, and this function defines that curve.  A number are built in (ease, ease-in, ease-out, ease-in-out, linear), some are step based, with the "transition" happening in steps or all at once (step-start, step-end, steps(n)) or a custom curve can be specified with cubic-bezier(n1, n2, n3, n4).
• transition-delay (MozDN) - The amount of time that passes from the moment a transition is triggered to when the animation for the transition actually begins. Like duration, it is specified in seconds or milliseconds.

CSS Transforms

The spec for transformations defines the following properties:

• transform (spec) (MozDN) - This property takes a number of transformation functions as parameters to change the appearance of the display elements it is applied to.  These changes do not affect the size or position of elements with respect to page flow (so scaling an element by 2 is not the same as making the height and width double), similar to the way relative positioning does not change page flow..
• matrix - compresses a series of transformations into a single call. Literally a 2D transformation matrix taking six values, which would likely be produced with programming tools. 
• matrix3d - 3d version of matrix.
• translate - 2D tranformation that moves the element in the X and Y directions by the specified amount.
• translateX - moves element in X direction only.
• translateY - moves element in Y direction only.
• translateZ - 3D tranform that moves element in Z direction.
• scale - increases the size of the element by a multiplication factor. Can take one or two values. If given one, the element scales uniformly, otherwise the factors are applied to the X and Y axis respectively.
• scaleX - scales the element in only the X direction.
• scaleY - scales in the Y direction only
• scaleZ - 3D transform that scales in the Z direction.
• scale3d - takes three parameters, scales in X, Y, and Z directions
• rotate - Turns the element about the element origin by the specified angle, which can be given in degrees or radians.
• rotateX - rotate element about the X axis.
• rotateY - rotate element about the Y axis.
• rotateZ - rotate element about the Z axis.
• rotate3d - specifies a 3d direction vector (basically a 3d coordinate) and a rotation angle.
• skew - Applies a slant to elements. Not recommended to use skew(), use skewX() and skewY() instead (according to CSS-Tricks and MozDN)
• skewX - tilts the element parallel to the X axis.
• skewY - tilts the element parallel to the Y axis.
• perspective - Adds a common point of origin to an element so that 3d transformed elements within have a common point of origin (technically a "perspective projection matrix"). Basically adds a vanishing point.
• transform-origin (spec) - The origin point for transformation calculations. Can be specified as a length offset from the top-left corner, percentage of the bounding box, or named sides (right, left, top, bottom, center). Transforms are centered (50%, 50%) by default.
• transform-style (spec) - can specify either flat (default) or preserve-3d, which will maintain the three dimensional relationship between sibling elements (translateZ). The spec describes this as a "stacking context"
• perspective (spec) - Similar to the perspective() transform function, this property establishes a depth of field.
• perspective-origin (spec) - This property sets the "vanishing point" for drawing perspective.
• backface-visibility (spec) - Setting this to "hidden" turns off the back of elements. So an element rotated about the Y axis for 180° will be invisible.

I showed off most of these properties in a demo for a prior post, however the following JSFiddle Demo shows off the backface visibility and perspective properties, which weren't really explored in that fiddle (works best in Chrome). I got the idea for the card flipping from the spec:

Putting it all together: Animation with @keyframes

It is possible to string together a collection of transitions into an animation. This is done by defining the style changes with @keyframes (@-webkit-keyframes for Chrome) and calling the animation with the animation property.  The @keyframes definition is a series of percentages, that basically are interpreted as "when the animation is X% complete, apply this style.  One thing to keep in mind with these styles is that when a property is defined in a frame, it completely overwrites any definitions for that same property in previous frames. This tripped me up when I was trying to define a scale and rotate in the same animation. It can't be done like this:

@keyframes spin {
  0%   {transform: rotate(0deg) }
  50%  {transform: scale(2)}
  100% {transform: rotate(180deg) }
}

... because what this is actually saying is "start with no rotation, when you are halfway done, scale 2x, then spin 180deg" when what I wanted was to spin 180deg over the whole animation while scaling up and down in the middle.  It needed to look like this:

@keyframes spin {
  0%   {transform: rotate(0deg) }
  50%  {transform: rotate(90deg) scale(2)}
  100% {transform: rotate(180deg) }
}

... which will scale and rotate simultaneously. This animation is named "spin", which will be referenced later.

Once the transition sequence is defined with @keyframes, the animation property can be added to the element that we wish to apply it to. animation (spec) is a shorthand property for the following properties:

• animation-name (spec) - the series of style changes defined by @keyframes 
• animation-duration (spec) - the length of time in seconds or milliseconds for one iteration of the animation
• animation-iteration-count (spec) - how many times the animation is repeated. May be a number or "infinite"
• animation-direction (spec) - normal runs the animation from 0% to 100% every time, whereas "alternate" runs it backwards every other iteration. Reverse runs backwards every time, and alternate-reverse runs backwards the first time then alternates.
• animation-timing-function (spec) - same as transition-timing-function
• animation-fill-mode (spec) - determines how properties in @keyframe are applied before the animation starts (according to animation-delay) and after it ends. "backwards" will apply the styles from the first frame immediately when the animation is called, and "forwards" will apply the styles from the last frame to the element after the last iteration has ended (these styles normally go back to the first frame syles). "both" applies both rules.
• animation-delay (spec) - A delay in seconds or milliseconds before the animation starts to run.

One final animation property that is not included in the shorthand animation property is the animation-play-state property. This can be set to either "running" or "paused". One application is to set the :hover pseudo-class to animation-play-state: paused;  to pause an animation that is being hovered over. The following JSFiddle demo shows off a simple animation (tested in Chrome and IE11):

Media Queries

It is possible to control how CSS is applied based on the specifications of the rendering device by using media queries.  This can be in the form of a "media" attribute on a <link> element, or a @media rule in a stylesheet.  In either case, the media query is resolved to true or false, and the contained CSS is only applied if the result is true (in the case of link elements, the CSS file is still downloaded, it just isn't applied).  The following media attributes can be tested:

• width (spec) & height (spec) - width and height of the target display area. This is either the viewport including the scroll bar or the page box.
• device-width (spec) & device-height (spec) - width and height of the rendering surface. This is the physical size of the media (screen dimensions, paper size)
• orientation (spec) - if height is greater than width, this is portrait. Otherwise it is landscape.
• aspect-ratio (spec) - ratio of width to height. 
• device-aspect-ratio (spec) - ratio of device-width to device-height. For example many TVs are 16/9. Monitors might be specified in pixel ratios (e.g. 1280/720).
• color (spec) - The number of bits per color component. As an example, TrueColor uses 24bits, 8 each for red, blue, and green, so would have a "color" value of 8.
• color-index (spec) - The number of colors the device supports. TrueColor supports 2^24 or 16,777,216 colors, so if you wanted at least this you would specify (min-color-index: 16000000)
• monochrome (spec) - Similar to color, but checks for bits in a monochrome pixel.
• resolution (spec) - checks the resolution of a device. non-square pixel devices must use min- and max-.  Can be specified in dots per inch (300dpi) or dots per centimeter (118dpcm)
• scan (spec) - The scanning process used by a TV device, either progressive or interlaced.
• grid (spec) - checks if the device is a grid based display (tty terminal, phone with fixed font).

Many of the attributes allow for the use of min- and max- prefixes.  Queries can also be strung together using logical operators. The word 'and' behaves as a logical AND, using a comma seperated list acts like logical OR, and 'not' behaves as typical negation, though it can only be applied to an entire query (not to an individual clause). There is also a keyword "only" that prevents the style from being applied to older browsers.

**As a final note, "hiding" controls is pretty well covered by this post on changing styles programmatically, so I won't rehash it here. "Disabling" a control is as simple as attaching the "disabled" or "disabled='disabled'" attribute to an element, which in JS is just <selector>.setAttribute('disabled','disabled').