Skip to content

Instantly share code, notes, and snippets.

@pethaniakshay

pethaniakshay/Animation.html

Created May 26, 2017 08:04
Show Gist options
  • Save pethaniakshay/a711c3227c14add6cd224d74b0d60f5c to your computer and use it in GitHub Desktop.
Save pethaniakshay/a711c3227c14add6cd224d74b0d60f5c to your computer and use it in GitHub Desktop.
Download ZIP
Best CSS3 Animation Demo [Super Mario Animation In HTML CSS]
Raw
Animation.html
<!-----------------------------------------------
Author: Qaidjohar
Date Created: Nov 7 2016
Logical Comment: Leisure Activity
------------------------------------------------>
<html>
<head>
<title>Mario</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.main
{
width:1000px;
margin-left: 183px;
}
.header
{
background-color: greenyellow;
height: 50px;
}
.container
{
background-color: darkseagreen;
}
.footer
{
background-color: black;
height: 25px;
}
td
{
height: 20px;
width: 20px;
background-color: darkseagreen;
}
h1
{
text-align: center;
color: green;
font-style: oblique;
line-height: 50px;
}
h4
{
color: yellow;
text-align: center;
line-height: 25px;
}
.mario
{
animation: mario-anim 10s infinite;
}
.red
{
background-color: red;
}
.yellow
{
background-color: yellow;
}
.brown
{
background-color: saddlebrown;
}
.black
{
background-color: black;
}
.blue
{
background-color: blue;
}
@keyframes mario-anim
{
50%{margin-left: 720px;}
100%{margin-left: 0px;}
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<h1>Recreational Coding with HTML</h1>
</div>
<div class="container">
<div class="mario">
<table cellspacing="0" cellpadding="0">
<!-- 1 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class=""></td> <!-- 4 -->
<td class=""></td> <!-- 5 -->
<td class=""></td> <!-- 6 -->
<td class=""></td> <!-- 7 -->
<td class=""></td> <!-- 8 -->
<td class=""></td> <!-- 9 -->
<td class=""></td> <!-- 10 -->
<td class=""></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 2 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class=""></td> <!-- 4 -->
<td class="red"></td> <!-- 5 -->
<td class="red"></td> <!-- 6 -->
<td class="red"></td> <!-- 7 -->
<td class="red"></td> <!-- 8 -->
<td class="red"></td> <!-- 9 -->
<td class=""></td> <!-- 10 -->
<td class=""></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 3 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class="red"></td> <!-- 4 -->
<td class="red"></td> <!-- 5 -->
<td class="red"></td> <!-- 6 -->
<td class="red"></td> <!-- 7 -->
<td class="red"></td> <!-- 8 -->
<td class="red"></td> <!-- 9 -->
<td class="red"></td> <!-- 10 -->
<td class="red"></td> <!-- 11 -->
<td class="red"></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 4 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class="brown"></td> <!-- 4 -->
<td class="brown"></td> <!-- 5 -->
<td class="brown"></td> <!-- 6 -->
<td class="yellow"></td> <!-- 7 -->
<td class="yellow"></td> <!-- 8 -->
<td class="black"></td> <!-- 9 -->
<td class="yellow"></td> <!-- 10 -->
<td class=""></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 5 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class="brown"></td> <!-- 3 -->
<td class="yellow"></td> <!-- 4 -->
<td class="brown"></td> <!-- 5 -->
<td class="yellow"></td> <!-- 6 -->
<td class="yellow"></td> <!-- 7 -->
<td class="yellow"></td> <!-- 8 -->
<td class="black"></td> <!-- 9 -->
<td class="yellow"></td> <!-- 10 -->
<td class="yellow"></td> <!-- 11 -->
<td class="yellow"></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 6 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class="brown"></td> <!-- 3 -->
<td class="yellow"></td> <!-- 4 -->
<td class="brown"></td> <!-- 5 -->
<td class="brown"></td> <!-- 6 -->
<td class="yellow"></td> <!-- 7 -->
<td class="yellow"></td> <!-- 8 -->
<td class="yellow"></td> <!-- 9 -->
<td class="black"></td> <!-- 10 -->
<td class="yellow"></td> <!-- 11 -->
<td class="yellow"></td> <!-- 12 -->
<td class="yellow"></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 7 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class="brown"></td> <!-- 4 -->
<td class="yellow"></td> <!-- 5 -->
<td class="yellow"></td> <!-- 6 -->
<td class="yellow"></td> <!-- 7 -->
<td class="yellow"></td> <!-- 8 -->
<td class="black"></td> <!-- 9 -->
<td class="black"></td> <!-- 10 -->
<td class="black"></td> <!-- 11 -->
<td class="black"></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 8 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class=""></td> <!-- 4 -->
<td class="yellow"></td> <!-- 5 -->
<td class="yellow"></td> <!-- 6 -->
<td class="yellow"></td> <!-- 7 -->
<td class="yellow"></td> <!-- 8 -->
<td class="yellow"></td> <!-- 9 -->
<td class="yellow"></td> <!-- 10 -->
<td class=""></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 9 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class="red"></td> <!-- 4 -->
<td class="red"></td> <!-- 5 -->
<td class="blue"></td> <!-- 6 -->
<td class="red"></td> <!-- 7 -->
<td class="red"></td> <!-- 8 -->
<td class="blue"></td> <!-- 9 -->
<td class="red"></td> <!-- 10 -->
<td class="red"></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 10 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class="red"></td> <!-- 3 -->
<td class="red"></td> <!-- 4 -->
<td class="red"></td> <!-- 5 -->
<td class="blue"></td> <!-- 6 -->
<td class="red"></td> <!-- 7 -->
<td class="red"></td> <!-- 8 -->
<td class="blue"></td> <!-- 9 -->
<td class="red"></td> <!-- 10 -->
<td class="red"></td> <!-- 11 -->
<td class="red"></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 11 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class="red"></td> <!-- 2 -->
<td class="red"></td> <!-- 3 -->
<td class="red"></td> <!-- 4 -->
<td class="red"></td> <!-- 5 -->
<td class="blue"></td> <!-- 6 -->
<td class="blue"></td> <!-- 7 -->
<td class="blue"></td> <!-- 8 -->
<td class="blue"></td> <!-- 9 -->
<td class="red"></td> <!-- 10 -->
<td class="red"></td> <!-- 11 -->
<td class="red"></td> <!-- 12 -->
<td class="red"></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 12 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class="yellow"></td> <!-- 2 -->
<td class="yellow"></td> <!-- 3 -->
<td class="red"></td> <!-- 4 -->
<td class="blue"></td> <!-- 5 -->
<td class="yellow"></td> <!-- 6 -->
<td class="blue"></td> <!-- 7 -->
<td class="blue"></td> <!-- 8 -->
<td class="yellow"></td> <!-- 9 -->
<td class="blue"></td> <!-- 10 -->
<td class="red"></td> <!-- 11 -->
<td class="yellow"></td> <!-- 12 -->
<td class="yellow"></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 13 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class="yellow"></td> <!-- 2 -->
<td class="yellow"></td> <!-- 3 -->
<td class="yellow"></td> <!-- 4 -->
<td class="blue"></td> <!-- 5 -->
<td class="blue"></td> <!-- 6 -->
<td class="blue"></td> <!-- 7 -->
<td class="blue"></td> <!-- 8 -->
<td class="blue"></td> <!-- 9 -->
<td class="blue"></td> <!-- 10 -->
<td class="yellow"></td> <!-- 11 -->
<td class="yellow"></td> <!-- 12 -->
<td class="yellow"></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 14 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class="yellow"></td> <!-- 2 -->
<td class="yellow"></td> <!-- 3 -->
<td class="blue"></td> <!-- 4 -->
<td class="blue"></td> <!-- 5 -->
<td class="blue"></td> <!-- 6 -->
<td class="blue"></td> <!-- 7 -->
<td class="blue"></td> <!-- 8 -->
<td class="blue"></td> <!-- 9 -->
<td class="blue"></td> <!-- 10 -->
<td class="blue"></td> <!-- 11 -->
<td class="yellow"></td> <!-- 12 -->
<td class="yellow"></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 15 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class="blue"></td> <!-- 4 -->
<td class="blue"></td> <!-- 5 -->
<td class="blue"></td> <!-- 6 -->
<td class=""></td> <!-- 7 -->
<td class=""></td> <!-- 8 -->
<td class="blue"></td> <!-- 9 -->
<td class="blue"></td> <!-- 10 -->
<td class="blue"></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 16 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class="brown"></td> <!-- 3 -->
<td class="brown"></td> <!-- 4 -->
<td class="brown"></td> <!-- 5 -->
<td class=""></td> <!-- 6 -->
<td class=""></td> <!-- 7 -->
<td class=""></td> <!-- 8 -->
<td class=""></td> <!-- 9 -->
<td class="brown"></td> <!-- 10 -->
<td class="brown"></td> <!-- 11 -->
<td class="brown"></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 17 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class="brown"></td> <!-- 2 -->
<td class="brown"></td> <!-- 3 -->
<td class="brown"></td> <!-- 4 -->
<td class="brown"></td> <!-- 5 -->
<td class=""></td> <!-- 6 -->
<td class=""></td> <!-- 7 -->
<td class=""></td> <!-- 8 -->
<td class=""></td> <!-- 9 -->
<td class="brown"></td> <!-- 10 -->
<td class="brown"></td> <!-- 11 -->
<td class="brown"></td> <!-- 12 -->
<td class="brown"></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
<!-- 18 -->
<tr>
<td class=""></td> <!-- 1 -->
<td class=""></td> <!-- 2 -->
<td class=""></td> <!-- 3 -->
<td class=""></td> <!-- 4 -->
<td class=""></td> <!-- 5 -->
<td class=""></td> <!-- 6 -->
<td class=""></td> <!-- 7 -->
<td class=""></td> <!-- 8 -->
<td class=""></td> <!-- 9 -->
<td class=""></td> <!-- 10 -->
<td class=""></td> <!-- 11 -->
<td class=""></td> <!-- 12 -->
<td class=""></td> <!-- 13 -->
<td class=""></td> <!-- 14 -->
</tr>
</table>
</div>
</div>
<div class="footer">
<h4>Keep Calm and Love Open Source</h4>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment