50projectsIn50days – Day 23: Kinectic Loader
The HTML page doesn’t have any html nor Javascirpt which explains the functionalyti. Therefore all the changes is made by the CSS.
The movement is made by the Transform function as you can see here:
@keyframes rotateA{
0%, 25%{
transform: rotate(0deg);
}
50%, 75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateB{
0%, 25%{
transform: rotate(90deg);
}
50%, 75% {
transform: rotate(270deg);
}
100% {
transform: rotate(450deg);
}
The transform property is:
The
Transformtransform
CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
You can see the code in this GitHub Repository: 23.kinetic_loader and the demo of the project is here: Kinectic Loader