FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

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 2 keyframes Animation Programming CSS JavaScript

Published :
Author :
Adam Khoury

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>