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>