Author: noahschardt

Posted on

3 Part Animation

animationstripDownload
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Part 3</title> 

<style> 

body{ background-color: rgb(67, 66, 66);}

hr{ border-style: dashed; border-width: 2px; 
    border-color:rgb(197, 237, 243);}


.section {
    display: flex;
	  width: auto; 
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 5%;}
    
#sprite {
width:400px; height:300px;
background:url(animationstrip.png) left center;

animation: go 3s steps(30) infinite;
}
@keyframes go { 100% 
    { background-position: -12000px; }
}

</style>
</head>

<body>

<hr>

<div class="section">
<div id="sprite"></div>
</div>
    
<hr> 


</body>

</html>