Motion graphics and interactive animation are frequently used in web applications to enhance the user experience – commonly referred to as UX. These transitions lead the eye to important content or interface items. There are three primary techniques for creating this kind of functionality with web based applications: Adobe Flash, JavaScript, and CSS3 Transitions.
Adobe Flash
Although Flash used to be the dominant method, it is rarely used for web applications currently because many mobile web browsers no longer support the Flash plugin. This is in part because of Steve Jobs’ criticism of Flash and Apple’s move not to support Flash on iOS devices. It’s also because of the rise of HTML5 which includes open standards for video, audio, and interactive media eliminating the need for proprietary plugins.
Though the operating system for the iPhone, iPod and iPad is proprietary, we strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. — Steve Jobs
JavaScript
JavaScript is considered the programming language of the web. These days almost every web application uses JavaScript in one way or another. Although JavaScript is an easy language to learn it does require a basic understanding of computer programming to use it effectively. Fortunately there are many libraries or “frameworks” that make adding JavaScript behaviours to your web application much easier. JavaScript combined with the HTML5 canvas element allows for the development of sophisticated motion graphics and animation that were historically only possible in standalone applications.
Examples:
Chrome Experiments
Motion Scripting Examples
CSS3 Transitions and Animations
See the Pen Shard Wall 3D CSS Animation by Nate Wiley (@natewiley) on CodePen.
CSS3 transitions and animations are time-based effects that have the advantage of being applied using the familiar technique of CSS rather than using complicated JavaScript behaviours. CSS3 transitions and animations are supported in most modern browsers including IE 10 (older versions of IE are not supported), Chrome, Safari, Firefox, and Opera.
.animated_box {
background: black;
border: 1px solid #000;
-webkit-animation: rotRect 3s ease-in-out 3s infinite alternate;
animation: rotRect 3s ease-in-out 3s infinite alternate;
}
@-webkit-keyframes rotRect {
0% {background: rgba(0,0,0,128); -webkit-transform: rotate(0deg); width: 10%;}
25% {background: rgba(64,64,64,100); -webkit-transform: rotate(45deg); width: 20%;}
50% {background: rgba(128,128,128,75); -webkit-transform: rotate(90deg); width: 10%;}
75% {background: rgba(192,192,192,25); -webkit-transform: rotate(135deg); width: 5%;}
100% {background: rgba(255,255,255,0); -webkit-transform: rotate(180deg); width: 20%;}
}
@keyframes rotRect {
0% {background: rgba(0,0,0,128); transform: rotate(0deg); width: 10%;}
25% {background: rgba(64,64,64,100); transform: rotate(45deg); width: 20%;}
50% {background: rgba(128,128,128,75); transform: rotate(90deg); width: 10%;}
75% {background: rgba(192,192,192,25); transform: rotate(135deg); width: 5%;}
100% {background: rgba(255,255,255,0); transform: rotate(180deg); width: 20%;}
}
Relevant Resources:
W3Schools CSS3 Transitions
MDN: Using CSS3 Transitions
CSS: Animation Using CSS Transforms
CSS3 Transition Tutorial
Lea Verou’s Prefix Free Widget
Trigger CSS3 Transitions on Click
