CODEWITHSUNDEEP
csssasscompass-sasscss-animations
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

Custom animations in Compass?

I am wondering how can i transle this to compass 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;
}

I really can't find much help about this in their docs

Upvotes: 2

Views: 8021

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

If you use the master branch (0.13.alpha) of compass, or the compass-animation plugin, you can use existing animation mixins. Compass 0.12 already has mixins for transforms as well. All together it would look like this:

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

That will output all the supported browser prefixes, as well as the official syntax - much more than just webkit.

Upvotes: 9

Related Questions