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: #B87BA0; }
100% { background: #D295BA; }
}Seems pretty reasonable, right? Well, as always, we can do better! Let's see how:
The first change that we can make is save
animatebox.cssasanimatebox.less—we'll introduce some mixins...