How To Create a Simple Animation Movie Using HTML
Today, I will give you an example of How To Create a Simple Animation Movie Using HTML. In this tutorial, you can make that type of animation easily in HTML just using notepad++. This animation is as simple as you insert an image tag in HTML. In this tutorial, you will make simple animation movies using HTML and CSS code. After watching this tutorial you can make it in just only 2 minutes and will be made that type of animation.
Also read: Top 10 HTML Awesome tags
How To Create a Simple Animation Movie Using HTML
Also read: Animated Indian flag using CSS
Now, Open the notepad++ and write the below code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>How To Create a Simple Animation Movie Using HTML</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body {
background: url('forest-bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.lion {
width: 18%;
}
.deer {
width: 14%;
}
marquee {
margin-top: 27%;
}
</style>
</head>
<body>
<marquee behavior="scroll" direction="right">
<img src="lion.gif" alt="Lion Gif" class="lion">
<img src="deer.gif" alt="Deer Gif" class="deer">
</marquee>
</body>
</html>
Also read: How to use HTML Marquee tag
Here, is the perfect speed for this Animation. what do you think about it?
<marquee direction="right" scrolldelay="400">
it is used to slow the delay.<marquee direction="right" scrollamount="40">
it is used for fast.