Cacher is the code snippet organizer for pro developers

// Animatsiooni loomine
// Animatsiooni käigu ehk kuidas ani jookseb, millega algab millega lõppeb
// ja mis vahepeal saab, määrata omaduse keyframes järgi
@keyframes Turn {
    // Siin määran keyframe'id ehk mis toimub teatud etapil
    // 0% on 1. keyframe anim. alguses
    0% {
        border-radius: 0 0 0 0;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 50% 0 0 0;
        transform: rotate(45deg);
    }
    50% {
        border-radius: 50% 50% 0 0;
        transform: rotate(90deg);
    }
    75% {
        border-radius: 50% 50% 50% 0;
        transform: rotate(135deg);
    }
    // animatsiooni lõpp 100%
    100% {
        border-radius: 50% 50% 50% 50%;
        transform: rotate(180deg);
    }
}

.box {
    width: 10rem;
    height: 10rem;
    background: violet;
    // rakendamaks loodud animatsiooni tuleb kasutada omadust animation
    //animatsiooni nimi
    animation-name: Turn;
    // animatsiooni kestus
    animation-duration: 2s;
    // animatsiooni dünaamika
    //  linear(jookseb võrdse kiiruse kogu anim.kestusel) ease(algab ja lõpeb aeglaselt, keskel kiirendus) ease-in(algab aeglaselt, keskosa ja lõpp kiire), ease-out(lõpeb aeglaselt) ease-in-out(algab ja lõpeb aeglaselt)
    animation-timing-function: ease-in-out;
    // anim. viide, ehk kaua enne kui animatsioon algab
    animation-delay: 1s;
    // animatsiooni kordade arv
    animation-iteration-count: infinite;
    // anim.suund normal(edaspidi) reverse(tagurpidi) alternate(edasi-tagasi) alternate-reverse (tagasi-edasi)
    animation-direction: alternate;
    // Järjekord on järgnev 1.animatsiooni nimi, 2. kestus, 3.anim.dünaamika, 4. viite aeg 5.anim.kordamiste arvu, 7.animatsiooni suund
    // animation: Turn 2s ease-in-out 1s infinite alternate;
}