Oh no! Snuggles the Cat is frozen in the bottom left corner. Help him out by using CSS animations to make him walk across the screen.
When he gets to the end, he should just reappear at the beginning and repeat his walking pattern.
Here's what one solution looks like in the browser. Feel free to put your own spin on it.
- CSS Animations Lesson Plan
- Thoughtbot: CSS Animations for Beginners
- CSS Tricks: Animation
- CSS Tricks: Transform
If you are using the
transformproperty, using values oftranslate()androtate()might be helpful depending on which prompt you are completing.
Make Snuggles walk backwards to the left when he reaches the end.
Make Snuggles walk back to the left when he reaches the end but, instead, make sure he's facing the direction in which he's walking.
Help Snuggles and Dewey the Dolphin become BFFs!
Give Snuggles special powers so that he walks up and over, meeting Dewey near the middle of the screen.
Make sure he's facing the direction that he's walking.
When Snuggles reaches Dewey, have him celebrate by doing a dance!
What exactly a "dance" entails is up to you. Looking into how to
rotatesomething, however, might help...
Make Snuggles bounce across the screen like a basketball.