QtWebKit Guide - Level 3 CSS

Transitional Sequences

The prior example showed a single transition, but transitions can also be run in sequence to form more complex animations. The following example demonstrates an embedded navigation panel that, when pressed, expands horizontally, then vertically to reveal numerous navigation options:

(CSS) (JavaScript)

The style sheets specify separate, comma-separated transitions for width and height properties:

     #accordion.expanded {
         width: 80%;
         height: 90%;
         -webkit-transition:
             width 0.5s ease-in-out 0.0s,
             height 0.5s ease-in-out 0.5s
         ;
     }
     #accordion.collapsed {
         width: 10%;
         height: 7%;
         -webkit-transition:
             height 0.5s ease-in-out 0.0s,
             width 0.5s ease-in-out 0.5s
         ;
     }

Each transition's additional time measurement specifies a delay. The long-form syntax may make this clearer:

     #accordion.expanded {
         width: 80%;
         height: 90%;
         -webkit-transition-property        : width        , height;
         -webkit-transition-duration        : 0.5s        , 0.5s;
         -webkit-transition-timing-function    : ease-in-out    , ease-in-out;
         -webkit-transition-delay        : 0.0s        , 0.5s;
     }
     #accordion.collapsed {
         width                : 10%;
         height                : 7%;
         -webkit-transition-property        : height    , width;
         -webkit-transition-duration        : 0.5s        , 0.5s;
         -webkit-transition-timing-function    : ease-in-out    , ease-in-out;
         -webkit-transition-delay        : 0.0s        , 0.5s;
     }

The shift to the expanded state involves two transitions, each of which lasts half a second and relies on the same ease-in-out function. The first takes place immediately and affects the width property. The second, affecting the height property, takes place after a delay that matches the first transition's duration. The reverse transition is much the same, only the height property transitions before the width to reverse the effect.

In addition to the navigation element's sequence of transitions, nested accordion-style animations activate when users expand top-level headings. Subheadings are revealed using a scaleY transform, which makes them appear as if they are flipping upwards.

The following example shows a photo gallery interface that uses the same techniques. (Size the window to emulate a smaller mobile screen.)

(CSS) (JavaScript)

The main interface uses simple transitions affecting opacity, along with scale and translate transforms, which combined make queued images appear dimmer, smaller, and horizontally offset from the main image.

A separate sequence of transitions activates when users tap selected images. The first transition uses a scaleX transform to flip the image towards the center. The second then flips out a panel featuring details on the photo. When users navigate away to adjacent photos, the panel automatically flips back to its original state as it is moved to the side.

Another example shows an interface featuring a simple list of items:

(CSS) (JavaScript)

When dismissed, items are wiped off the screen using a skew transform that provides the illusion of speed. Remaining items move upwards to fill the space vacated by items that have been removed.

This example uses the same technique of sequential transitions. The first transition applies to the combined translate/skew transform. The second, delayed transition modifies the top property to align remaining items to a grid.

Note that for items to reposition themselves in this example, a vertical grid must be explicitly specified. You can only apply transitions between properties you explicitly define and activate, not between values the browser assigns internally to automatically position elements relative to each other.

     nav > a:target { -webkit-animation : pulse 1s infinite; }

     nav > a:target {
         -webkit-animation-name        : pulse;
         -webkit-animation-duration        : 1s;
         -webkit-animation-iteration-count    : infinite;
     }

     @-webkit-keyframes pulse {
         0% { opacity : 1.0 }
         50% { opacity : 0.7 }
     }

     @-webkit-keyframes slide_in {
       from {
         left            : 80%;
         right           : -80%;
       }
       to {
         left            : 0em;
         right           : 0em;
       }
     }

     @-webkit-keyframes banner_scroll {
         0% { left    : 0%; }
         18% { left    : 0%; }
         20% { left    : -100%; }
         38% { left    : -100%; }
         40% { left    : -200%; }
         58% { left    : -200%; }
         60% { left    : -300%; }
         78% { left    : -300%; }
         80% { left    : -400%; }
         95% { left    : -400%; }
         100% { left : 0%; }
     }