1

如果我制作一个关键帧动画，我必须复制它 4 次，如果我想更改值，我必须每次更改 4 次？这太疯狂了。有什么方法可以简化它？ 

@-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;
        }

    }
4

2 回答 2

2

您可以免费使用前缀来简化您的 CSS 代码。基本上，您编写的代码没有-webkit-或任何其他前缀。

http://leaverou.github.com/prefixfree/

于 2012-12-07T11:33:18.627 回答
1

不，但你可以使用像SASS或LESS这样的预处理器。

这是两者的比较：CSS-tricks 文章。

本质上，当您编写代码时，您可以使用转换为 CSS 的变量。因此，您将使用变量进行开发，而用户获得的 CSS 将是转换后的 CSS。

这是一个类似的问题：SASS 简化了带有前缀的 mixin。

于 2012-12-07T08:00:18.457 回答