Пользовательские анимации в Compass?

Question

Мне интересно, как я могу transle это компас Примеси

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