2

我想知道如何将其转换为指南针 mixins

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, 0px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 0px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 0px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 0px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, 0px) rotate(-1deg); }
}
.item:hover{
    -webkit-animation-name: shake;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    /*-webkit-animation-iteration-count: infinite;*/
    -webkit-animation-timing-function: linear;
}

我真的在他们的文档中找不到太多帮助

4

1 回答 1

9

如果您使用 compass 的 master 分支 (0.13.alpha) 或compass-animation插件，则可以使用现有的动画 mixin。Compass 0.12 也已经有了用于转换的 mixin。总而言之，它看起来像这样：

@include keyframes(shake) {
    0% { @include transform(translate(2px, 0px) rotate(0deg)); }
    10% { @include transform(translate(-1px, 0px) rotate(-1deg)); }
    20% { @include transform(translate(-3px, 0px) rotate(1deg)); }
    30% { @include transform(translate(0px, 0px) rotate(0deg)); }
    40% { @include transform(translate(1px, 0px) rotate(1deg)); }
    50% { @include transform(translate(-1px, 0px) rotate(-1deg)); }
    60% { @include transform(translate(-3px, 0px) rotate(0deg)); }
    70% { @include transform(translate(2px, 1px) rotate(-1deg)); }
    80% { @include transform(translate(-1px, -1px) rotate(1deg)); }
    90% { @include transform(translate(2px, 0px) rotate(0deg)); }
    100% { @include transform(translate(1px, 0px) rotate(-1deg)); }
}
.item:hover{
    @include animation(shake 0.8s infinite linear);
    @include transform-origin(50% 50%);
}

这将输出所有支持的浏览器前缀，以及官方语法——不仅仅是 webkit。

于 2013-05-27T16:25:22.837 回答