Learning Less.js

Simplifying the animation markup with Less

Okay, we're finally at the point where I am sure you're itching to get to: writing some code! Don't worry, we're almost there. I just want to cover a small but key point, about how we can use Less to make coding animations simpler. To illustrate this, we're going to rework the critical parts of the animation demo we created earlier in this chapter.

If we take a look back at the key parts of the animation demo, we have this:

/* Chrome, Safari, Opera */ @-webkit-keyframes animbox { 0% { background: #85486d; } 25% { background: #9F6287; } 50% { background: #B87BA0; } 100% { background: #D295BA; } } /* Standard syntax */ @keyframes animbox { 0% { background: #85486d; } 25% { background: #9F6287; } 50% { background: ...