⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

WAPG 2 keyframes Animation Programming CSS JavaScript

Published : April 1, 2017   •   Last Edited : November 24, 2025   •   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>
▲