Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

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>