סובבו אותו!

כדי ליצור אנימציות באמצעות CSS בלבד, נשתמש ב־keyframes, בתחביר הבא

@keyframes animation_name {
	from {
		...
	}
	to {
		...
	}
}

שימו לב ל־animation_name, שהוא שם האנימציה (אפשר לשנות אותו). בתוך הגופים של from ו־to יש להוסיף את השינויים במאפייני CSS, לדוגמה,

@keyframes fade_out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

הקוד שלמעלה ייצור אנימציה שבה האטימות משתנה מ־1 ל־0.

כדי להוסיף את האנימציה שלמעלה לאלמנט מסוים, השתמשו, לדוגמה, ב־

#spinner {
	animation: fade_out 1.3s infinite;
}

הקוד שלמעלה יוסיף לאלמנט #spinner את האנימציה fade_out, עם משך של 1.3 שניות, והיא תופעל אינסוף פעמים.