Comic Director - Next Level App Design with CSS3 Animations

Like HTML5 and JavaScript, animation on the web has evolved and changed as the tools and programming languages modernize. Early web animating techniques were mostly done with the help of third party plugins such as Flash or with “heavy doses” of complicated JavaScript. CSS3 changes all that. Animations are now handled by the browser, creating a better, more fluid experience for the user.

Comic Director App – The Hub

Web applications also benefit from the new animation capabilities in CSS3.  Examples of new CSS3 animation techniques can be seen throughout applications such as Comic Director, from bouncing icons, to dialog boxes that materialize with style. By moving away from JavaScript and Flash for animation, developers can improve the performance of web applications and enhance them visually at the same time.

Transitions

Transitions allow you to create effects that occur smoothly over a specified duration. Object properties such as background color, width, height, and opacity can be animated. CSS3 transitions have also added additional controls, such as what object properties get animated, when, and for how long.

When coding transitions, you first want to define which of your object’s properties get animated and tell your application or the browser that you’re ready to animate. The transition: all property means all of the CSS properties you specify will animate at the same time.

.transition { 
                transition: all; 
}
[css]
Thinking in states is helpful when trying to decide what and how to animate an object in your application. Ask yourself, what state do you want your object to start and end in?
The example below shows one way to do that with CSS3. You first tell the application that you want to transition the height of your object called “element” over one second. The beginning state noted by the CSS rule element.in sets the starting height of your object at 500 pixels. The end state, defined by the element.out rule, sets the height of the object at the end of the one second duration. The end result gets you an object that quickly flattens and disappears. 
[css]
element {
      transition: height 1s;
}
element.in {
      height: 500px;
}
element.out {
      height: 0px;
}

The next code example demonstrates how to transition multiple properties at the same time. Like before, the code here specifies that all the properties should animate over half a second. The starting state defined by the element.in syntax looks like a 300 by 500 pixel box. Over the course of the duration, the box dimensions will shrink to 0 pixels, while also becoming completely translucent as defined by the opacity: 0 syntax. The object will also rotate 90 degrees counter clockwise as well, noted by the transform: rotate(-90deg) syntax.

element { transition: height .3s, width 1s, opacity .5s; }
element.in {
    width:300px;
    height:500px;
}
element.out {
    width:0; height:0;
    opacity:0;
    transform: rotateY(-90deg);
}

In the final example, a similar transition is performed, except now there are two object properties that will animate slightly offset from each other. Like before, we first tell the application we want to perform a transition with the transition:all property, and then define the total amount of time each object will animate. The element.in{ rule defines the starting property states for width and height of the object. In this case, the transition height will animate over 300 milliseconds and the width over 1 second. The element.out{ rule defines what the object will look like at the end of the duration, which is zero pixels for both. The effect results in a square object that quickly shrinks and vanishes, height first followed quickly by width. Transitions like this can be triggered by touch or mouse input, enabling countless possibilities for animation within web applications.

element {
transition: all
                height 0.3s,
                width 1s,
                background: red;
                                 
}
element.in {
    width:300px;
    height:500px;
}
element.out {
    width:0; height:0; background:red;
 
}

Keyframe animation

Key frame animation is another popular CSS3 technique. It allows you to set the property values of the start and end states for an object and set waypoints between states to achieve even more complex animations.

Unlike transitions, keyframe animation uses the CSS3 property “animation” to set the timing and duration of the animation. For example, to set a keyframe animation that lasts three seconds, you would write something like this:

h1 {
  animation-duration: 3s;
  animation-name: slidein;
}

From here, you can define the properties for the object’s start and finish state. To do so, the syntax from{ is used, which tells the browser what the object properties are at 0% or 0s. The syntax to{ tells the browser what the object state should be at 100% or three seconds into the animation.

@keyframes slidein { 
     from { 
           margin-left: 100%; 
           width: 300% 
     } 
     to { 
           margin-left: 0%; 
           width: 100%; 
     } 
}

This example code can be applied to a graphic element or block of text. When applied in this example, the element or block of text will start at the very far right margin of the screen and slide over to the very far left of the screen over the course of the three seconds.

CSS3 animations are an exciting step forward in the world of web application development:

  • They are incredibly useful for simple animations.
  • They run with better performance compared to Flash and JavaScript.
  • They are an easy way to make your web applications more visually appealing.

Learn more about web application development at the Intel® Developer Zone. Check out the new Intel® HTML5 Development Environment and look at code examples at the Intel® HTML5 Playground.

Intel® HTML5 Development Environment:

The Intel® XDK is an HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC platforms.

software.intel.com/html5tools

Intel® HTML5 Playground:

The Intel HTML5 Playground provides you with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points. Anything you that you create, can be shared using a permalink.

software.intel.com/appup/html5-playground

有关编译器优化的更完整信息,请参阅优化通知