Category: Animation

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>
Posted on

Animation Experiment

First week of animation experimentation.

I got a little lazy with the feet walking and the environment. For future versions, I want the flowers to wave gently. I used Adobe Animate for the first time to create this gif. The animation elements are partial vectors from Adobe Stock. I imported them into Figma to assemble and add texture. For the final animation, I plan on adding more texture and brushstrokes.

Here are the files I used and tweaked:

Posted on

Frog Animation Sprite (Part 3) Maria

Animation Part 3 #frog { margin: 0 auto 100px auto; position: relative; width:400px; height:200px; top: 20px; border:1px solid white; background: url(“frogSprite3.png”) left center; animation: launch 2s steps(24) infinite;} @keyframes launch { from {background-position: 0px 0; } to {background-position: -9600px 0; }