Question

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

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

我真的can't find much在他们的文档中对此有所帮助

Answer 1

如果使用指南针的主分支（0.13.alpha）或compass-animation插件，则可以使用现有的动画混合。指南针0.12已经有用于变换的mixins。总之它看起来像这样：

@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。

指南针中的自定义动画？

1 个答案: