Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Draw Dynamic Animation in HTML5?
HTML has division and button elements that can be used to draw Dynamic Animation. The ability to generate interactive and visually graphics using web technologies is referred to as dynamic animation in HTML5. HTML5 includes a number of complex tools that enable developers to build dynamic and responsive animations by combining HTML, CSS, and JavaScript. Animations extend from simple state transitions through complex interactive models and games. One of the primary advantages of implementing HTML5 for animation is that it is platform-independent and can run on a wide range of platforms, including desktop and mobile devices. HTML5 thus provides a strong tool for web developers to create engaging and dynamic web experiences for users.
Visual Representation
Syntax
<button></button>
The button is the HTML element that defines the clickable area.
<div></div>
The div name specifies the division element in HTML. It creates the division or particular section in the HTML document.
Properties Used
The following properties used in the circle are −
width − Define the width of the division element.
height − Define the width of the height element.
background-color − To set the background color of the division element.
animation − This property defines the direction moves of the specific element that is used for dynamic animation.
border-radius − Define the border radius of the division element corner.
box-shadow − Define the shadow to the button element that looks like user interaction.
Example 1
In the following example, we will create the division element to set the box, and using inline CSS the box appears the good shapes by border-radius property. To make dynamic animation it uses the property named animation that set the infinite movement of the box in horizontal mode. Next, it uses the @keyframe move using internal CSS that controls the movement over animation.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Animation in HTML and CSS</title>
<style>
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(600px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<h1>Dynamic Animation</h1>
<div style="width: 100px; height: 100px; background-color: red;
animation: move 2s ease-in-out infinite; border-radius:30px;">
</div>
</body>
</html>
Example 2
In the following example, we will create the button element to show the dynamic animation when the cursor moves over it. There will be the use of h1 element that represents the information of the program. To make dynamic animation it will use an element selector i.e. button and to make it more dynamic it will use hover along its using internal CSS.
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<style>
button{
box-shadow: 0 0 5px cyan,0 0 25px;
}
button:hover{
box-shadow: 0 0 5px cyan, 0 0 25px cyan, 0 0 50px cyan, 0 0 100px cyan, 0 0 200px cyan;
}
</style>
</head>
<body>
<center>
<h1>Dynamic animation on button</h1>
<button>Click Here</button>
</center>
</body>
</html>
Conclusion
We discussed the property of properties of box-shadow and animation to draw dynamic animations in HTML5. HTML5 is a powerful set of tools that represents the interactive animation on the webpage. The above output shows the dynamic animation of division and button element.
196 Views
