WAPG 1 Transition Animation Programming CSS JavaScript

Published :
Author :
Adam Khoury

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>