Simple Animation Directions

Do you know how to write HTML and draw cartoon images?  If yes, I found the simplest code ever for frame animation!

Use this code with 6 different sprite poses moving from left to right.

<!DOCTYPE html>
<html>
<head>
<style>
#orangefish  {
background: url(“images/orange fish.png”);
width: 1800px;
height: 500px;
animation: walk-east 2.5s steps(6) infinite;
}
@keyframes walk-east {
from {background-position: 0px;}
to {background-position: -1800px;}
}
</style>
</head>
<body>
<div id=”orangefish”> </div>);
</body>
</html>

 

Author: Stephanie

Everything I learned in my professional career thus far has helped me build simple, image based lessons for my Pixar generation students. After I graduated from college, I moved to Atlanta and starting working as a technology consultant. I traveled across the country installing help desk systems. I was in the role of trainer and explainer and told our clients in plain English what we were installing and how it would help them do business. I wrote manuals and did a lot of hand holding. I always believed that technology was a great equalizer and it doesn’t care if you are popular or you can run fast or if you’re having a bad day. With tech skills you can build anything and to learn tech is everything. It’s not that hard! It just had to be broken down correctly. I knew I could teach tech to kids if I made it fun enough. In 2002, I went back to school and received a masters in public management and IT from Carnegie Mellon University to help my journey.

Leave a Reply