/* this is a little test kit (HTML/CSS) for using CSS animation to gently move a div up and down. you should have two files:
	"motionanimationtest.html" and "motionanimationtest.css"
	and they need to go into the same folder in order to work.

	this kit will (hopefully) help you learn to do exactly 1 thing: move a thing up and down in a specific way. i'm sorry i can't help you with more! this is just intended to be a springboard to see how extremely basic CSS animation works. */


/* okay! the "@keyframes" rules are doing the animating! you need to keep the "@keyframes" part, but you can change "upandDown" to anything as long as you ALSO change it in the HTML to match.

as far as i understand it, the 0% - 50% - 100% refers to how far along the animation timeline you're at.

basically, this is what it's doing:

at 0% along the timeline (the start), change the position on the Y-axis to a negative -10%. this moves the div up slightly

at 50% (halfway through the animation), set the Y-axis to a positive 10%. this results in the div sliding all the way past the 0% mark (its real position), thus moving down slightly

at 100%, change the position on the Y-axis back to a negative -10%. this moves the div back up, and puts it in the same place for the loop to start again smoothly.

you could also use px values, i'm just more comfy with % values

 */
 
@keyframes upandDown {
	0% {
		transform: translateY(-3%);
	}
	50% {
		transform: translateY(3%);
	}
	100% {
		transform: translateY(-3%);
	}
}


/* this is just me giving you some visual space so you can see the object moving properly. this is unrelated to the animation or this test in general and you can feel free to remove it and the animation will still function */
body {
	padding: 50px;
}


/* this styles the div class "motiontest" to be a clear orange colour and a fixed size, so that it shows up on the page as a square. */
.motiontest {
	background-color: orange;
	width: 300px;
	height: 300px;
}

/* this test page and its accompanying HTML file is downloadable for free from https://goodmode.neocities.org/freestuff.html

a good resource is also https://www.w3schools.com/css/css3_animations.asp and will help you learn more

i also feel it is my duty to beg you on my hands and knees not to make websites with bright/fast flashing or constant rapid motion, especially on elements that have text you expect people to read. of course i'm not your dad and you have freedom of expression - that's why we learn to make our own websites - but please bear in mind people with sensitivity to these things who may suffer because of it. */