Question

If I make a keyframe animation I have to copy it 4 times, and if I want to change value I have to change 4 times each? this is crazy. any ways to simplify it?

@-moz-keyframes ballanim /* Firefox */
    {
        0%   {
            top:0px;
               /* -webkit-animation-timing-function: ease-in;*/
        }

        25%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }

        50%{
            top:0px;
        }

        75%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }


        100%{
            top:0px;
        }

    }

    @-webkit-keyframes ballanim /* Firefox */
    {
        0%   {
            top:0px;
               /* -webkit-animation-timing-function: ease-in;*/
        }

        25%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }

        50%{
            top:0px;
        }

        75%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }


        100%{
            top:0px;
        }

    }
    @-o-keyframes ballanim /* Firefox */
    {
        0%   {
            top:0px;
               /* -webkit-animation-timing-function: ease-in;*/
        }

        25%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }

        50%{
            top:0px;
        }

        75%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }


        100%{
            top:0px;
        }

    }

    @keyframes ballanim /* Firefox */
    {
        0%   {
            top:0px;
               /* -webkit-animation-timing-function: ease-in;*/
        }

        25%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }

        50%{
            top:0px;
        }

        75%{
            top:20px;
           -webkit-animation-timing-function: ease-in-out;
        }


        100%{
            top:0px;
        }

    }

Answer 1

No, but you can use a pre-processor like SASS or LESS.

Here’s a comparison of the two: CSS-tricks article.

Essentially when you are writing code, you can use variables, which are converted into CSS. So you will be developing with variables, while the css the user gets will be the converted CSS.

Here is a similar question: SASS simplify a mixin with prefixes.