Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

WAPG 2 keyframes Animation Programming CSS JavaScript

Learn keyframes animation programming with CSS and JavaScript.

Lesson Code <head> <style> #object1 { background: pink; width: 100px; height: 100px; } </style> <script> var keyframes = "@keyframes box-move{ 0%{width:100px;} 100%{width:300px;} }"; var s = document.createElement("style"); s.innerHTML = keyframes; document.getElementsByTagName("head")[0].appendChild(s); </script> </head> <body> <div id="object1">Object 1</div> <script> var el = document.getElementById("object1"); el.style.animation = "box-move ease-in-out 1.0s infinite alternate"; </script> </body>
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