@keyframes rule – Tim McDermott–Web Developer, Freelancer & Blogger

I learned how to animate in CSS! What began as a very simple sliced circle with boxes came to life with movement and color change.

Animation breathes life into your images.

The CSS @Keyframes Rule allows the control of steps in a sequence to be defined along the points of animation sequence.

The rule is explained in both Mozillas docs and w3schools, the latter provided some good examples to run and try for yourself.

The basic syntax is:

@keyframes name {
    keyframes-selector {css-styles;}
    keyframes-selector {css-styles;}
}

For my wheel, I used:

@keyframes wheel {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360%);}
}

Also, the defined term (name), needs to be added to the CSS selector. In my case, under .wheel, I added:

.wheel {
    animation-name: wheel;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

There is a cleaner way to write this:

.wheel {
    animation: wheels 10s linear infinite;
}

Looking forward to playing more with animations and the @keyframes rule in my sites.

For more information on @keyframes rule, see: