Spin it!
Lesson 4 of 6 in Coddy's CSS Project - Simple Loading Spinner course.
To create animations only with CSS we will use keyframes, with the following syntax
@keyframes animation_name {
from {
...
}
to {
...
}
}Notice the animation_name which is the name of the animation (can be changed), inside the from and to body you should insert the change of the CSS properties, for example,
@keyframes fade_out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}The above will make animation from opacity 1 to opacity 0.
To append the above to specific element, use, for example,
#spinner {
animation: fade_out 1.3s infinite;
}The above will append to #spinner element the animation fade_out, with duration 1.3 seconds, and it will run for infinite times.
Challenge
EasyUse keyframes to animate rotation of #spinner.
The animation should run for 1.5 seconds and for infinite times.
Call the animation with any name you like
If you are not sure how to animate rotation, check the hint.
Try it yourself
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="spinner" />
</body>
</html>