Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Animation-Direction


If you want to move an item in a forward direction, use @keyframes and place the beginning top and left position at 0%. You then add your ending position at 100%. Then if you want the animation to hesitate at different spots, add new values to the top and left positions somewhere in-between (like at 25%, 50%, and 75%).

See the example below of an animation keyframe moving a box forward. To start the animation, refresh the page.

animation: goForward ; animation-direction: alternate (RED BOX)

HTML

html code example of images in the aside element
Go Forward

CSS

css code for selecting nested elements

animation: goReverse ; animation-direction: alternate (GREEN BOX)

HTML

html code example of images in the aside element
Start in Reverse

CSS

css code for selecting nested elements

animation: goAlternate ; animation-direction: alternate (BLUE BOX)

HTML

html code example of images in the aside element
Start in Reverse

CSS

css code for selecting nested elements


Spend at least an hour playing around with keyframe animations. Then go back to the animation main page to learn more things you can do with CSS animations.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved