Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Trigger CSS Transitions to Control Animations

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>
thumb

JavaScript Videos

Animation Programming

Trigger CSS Transitions to Control AnimationsStart Stop CSS keyframes animation with JavaScriptMenu Button Marker Animation TutorialTransform Rotate Image Spin Smooth Animation TutorialBubbles Content Slideshow Application JavaScript CSS HTML