Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

WAPG 1 Transition Animation Programming CSS JavaScript

In this first video we'll briefly take a look at animation technologies that we'll be exploring in the guide, then we'll begin transition programming because transitions are a great place to ease beginners into the more advanced material that will be covered later.

Lesson Code <style> #box { background: red; width: 100px; height: 100px; transition: transform 2.5s linear 0s, opacity 1.5s linear 0s; } </style> <div id="box"></div> <script> var el = document.getElementById("box"); //el.style.transition = "transform 2.5s linear 0s, opacity 1.5s linear 0s"; el.addEventListener( "transitionend", function(event){ alert(event.propertyName+" transition has ended. The elapsed time was "+event.elapsedTime); } ); </script> <button onclick="el.style.transform = 'translateX(300px)'">transform</button> <button onclick="el.style.opacity = '.1'">opacity</button>
thumb

JavaScript Videos

Web Animation Programming Guide

WAPG 1 Transition Animation Programming CSS JavaScriptWAPG 2 keyframes Animation Programming CSS JavaScriptWAPG 3 Sprite Animation Programming CSS JavaScriptWAPG 4 Script Based Animation Programming JavaScript CSS TutorialWAPG 5 Collision Hit Detection DOM Programming JavaScript TutorialWAPG 6 SVG Animation Programming SMIL JavaScript CSS