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.

Trigger CSS Transitions to Control Animations

Published :
Author :
Adam Khoury
Learn an efficient way to control and establish animations in your web site and web applications. In this video lesson we will demonstrate how to trigger CSS transition animations using JavaScript. This will help designers and developers avoid requiring bulky 3rd party libraries to have smooth buttery animations at work in their web applications and web pages. Transition the background property using a JavaScript based trigger <!DOCTYPE html> <html> <style> div#box1 { background: #9DCEFF; width: 400px; height: 200px; } </style> <script> function changeBG(el,clr){ var elem = document.getElementById(el); elem.style.transition = "background 1.0s linear 0s"; elem.style.background = clr; } </script> <body> <button onclick="changeBG('box1','#F0F')">Magenta</button> <button onclick="changeBG('box1','#0C0')">Green</button> <button onclick="changeBG('box1','#9DCEFF')">Origninal</button> <div id="box1">Content in box 1 ...</div> </body> </html> Transition the opacity property using a JavaScript based trigger <!DOCTYPE html> <html> <head> <style> div#box1 { background: #9DCEFF; width: 400px; height: 200px; } </style> <script> function fadeOut(el){ var elem = document.getElementById(el); elem.style.transition = "opacity 0.5s linear 0s"; elem.style.opacity = 0; } function fadeIn(el){ var elem = document.getElementById(el); elem.style.transition = "opacity 0.5s linear 0s"; elem.style.opacity = 1; } </script> </head> <body> <button onclick="fadeOut('box1');">Fade out</button> <button onclick="fadeIn('box1');">Fade in</button> <div id="box1">Content in box 1 ...</div> </body> </html> Transition the height property using a JavaScript based trigger <!DOCTYPE html> <html> <head> <style> div#box1 { background: #9DCEFF; width: 400px; height: 200px; overflow: hidden; } </style> <script> function slideOpen(el){ var elem = document.getElementById(el); elem.style.transition = "height 0.2s linear 0s"; elem.style.height = "200px"; } function slideClosed(el){ var elem = document.getElementById(el); elem.style.transition = "height 0.2s linear 0s"; elem.style.height = "0px"; } </script> </head> <body> <button onclick="slideClosed('box1');">slideClosed</button> <button onclick="slideOpen('box1');">slideOpen</button> <div id="box1">Content in box 1 ...</div> </body> </html> Transition the left property using a JavaScript based trigger <!DOCTYPE html> <html> <head> <style> div#box1 { background: #9DCEFF; width: 400px; height: 200px; position: absolute; top: 50px; left: -400px; } </style> <script> function slideIn(el){ var elem = document.getElementById(el); elem.style.transition = "left 0.5s ease-in 0s"; elem.style.left = "0px"; } function slideOut(el){ var elem = document.getElementById(el); elem.style.transition = "left 0.5s ease-out 0s"; elem.style.left = "-400px"; } </script> </head> <body> <button onclick="slideIn('box1');">slide in</button> <button onmouseover="slideOut('box1');">slide out</button> <div id="box1">Content in box 1 ...</div> </body> </html>