Creating animation by using style property
The style property can be used to add some inline styles to an element. We can use this property with a event to add and remove styles on the occurrence of the event.
Syntax:
element.style.css_property_name = value
Example: In the below code, we will use the style property to create an animation using JavaScript.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript - Animations</title> <style> .defInp { border: none; width: 200px; padding: 5px; } .defInp:focus-visible { outline: none; } .border { height: 2px; width: 200px; background-color: #ccc; position: relative; } .inner_border { height: 2px; width: 0; position: absolute; left: 0; background-color: blue; transition: all 0.3s ease-in; } .animate { width: 100%; } </style></head><body> <center> <h1>w3wiki</h1> <label for="myInput">Input Box: </label><br /><br /> <input type="text" placeholder="Enter Something..." id="myInput" class="defInp"> <div class="border"> <div class="inner_border" id="borBot"></div> </div> </center> <script> const myInput = document. getElementById('myInput'); const borBot = document. getElementById('borBot'); function animateInp() { borBot.classList.add('animate'); } function remAnimateInp() { borBot.classList.remove('animate'); } myInput.addEventListener('focus', animateInp); myInput.addEventListener('blur', remAnimateInp); </script></body></html> |
Output:
JavaScript Animations
JavaScript is a very powerful scripting language. We can create animations in JavaScript using some CSS properties on the DOM elements. In this article, we will create some animations using JavaScript.
We can use the following methods to create animations using JavaScript:
Table of Content
- Creating animation using the setTimeout() method
- Creating animation using the setInterval() method
- Creating animation by using style property