Shortening css3 animation keyframe definitions

Question

While I was writing many quasi-identical CSS3 animations, I wondered if there's a way to shorten the code.
Each time, only the final keyframe is different.

@-webkit-keyframes one {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 50px;
    }
}

That code is pretty long so I thought it could be easily shortened but looks like you have to define the whole animation over and over. I tried something like this, but that doesn't work in Chrome and Safari.

@-webkit-keyframes one, two {
    from {
        [identical properties]
    }
    [...etc...]
    80% {
        [identical properties]
    }
    to {
        margin-left: 20px;
    }
}

@-webkit-keyframes two {
    to {
        margin-left: 50px;
    }
}

Is there no way to define 2 identical animations? :o

score 1 · Accepted Answer · edited May 23 '17 at 11:55

To avoid copy-pasting during development, you can use a CSS preprocessor, such as SCSS / SASS and LESS. The mixin feature greatly reduces the code size:

For a single property, writing a single mixin is sufficient:

.Duplicates(@marginLeft) {
    from { /* ... */ }
    80%  { /* ... */ }
    to { margin-left: @marginLeft;}
}
@-webkit-keyframes one {
    .Duplicates(20px);
}
@-webkit-keyframes two {
    .Duplicates(50px);
}

Demo: An animated busy supermarket, using pure CSS(3)

For me, the previous mixin was not sufficient. I also wanted dynamic names and vendor-prefixes ^how?, so that I do not have to write a rule 10 x 5 = 50 times (10 names, 5 vendors). That's a chance to show the power of a CSS preprocessor:

Input (less) - http://pastebin.com/BcRYzdBj - 3kB
Output (css) - http://pastebin.com/zLCS2z7L - 14kB (Gzipped 999 bytes)
Demo (source): http://jsfiddle.net/ecPWA/show/

Rich Bradshaw · Answer 2 · 2011-08-01T20:09:49.353

1

Not at the moment. Remember that if you are gzipping your CSS that a lot of this inefficiency will disappear.

edited Aug 01 '11 at 20:09

answered Aug 01 '11 at 12:13

Rich Bradshaw

71,795
44
182
241

Ok, hopefully such possibilities will be implemented on next versions. :) What do you mean by "gripping my css" ? – Daan Aug 01 '11 at 16:21
Ooops - Lion autocorrect casualty number one! Should have said gzipping. – Rich Bradshaw Aug 01 '11 at 20:10

score 1 · Answer 3 · answered Aug 03 '11 at 03:40

Not inherently. Especially with vendor prefixes, CSS can get really dizzying, however if you are deploying the file properly (GZip, caching, etc.) it's not really an inefficiency, just a pain in the butt to write.

Depending on your project, you can parse CSS as PHP and define variables there. I find the idea really sexy but haven't had enough of a need to use it.

Shortening css3 animation keyframe definitions

3 Answers3

Demo: An animated busy supermarket, using pure CSS(3)