Geek Logbook

Tech sea log book

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 transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Transform

You can see the code in this GitHub Repository: 23.kinetic_loader and the demo of the project is here: Kinectic Loader

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>