Use CSS3 animation in Compass

2013-10-12

/posts/2013-10-12-use-css3-animation-in-compass/

Table of Contents

# Use CSS3 Animation In Compass

Compass default dosen’t have mixin in CSS3 animation We can use this method in scss

/* define */
$animation-support: webkit, moz, o, ms, not khtml;

/* use */
.animation {
    @include experimental('animation-name', move, $animation-support);
    @include experimental('animation-duration', 5s, $animation-support);
    @include experimental('animation-iteration-count', 1, $animation-support);
}

and add keyframes

/* define */
$animation-support: webkit, moz, o, ms, not khtml;
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

/* use */
.animation {
    @include experimental('animation-name', move, $animation-support);
    @include experimental('animation-duration', 5s, $animation-support);
    @include experimental('animation-iteration-count', 1, $animation-support);
}

@include keyframes(move) {
    0% {
        top: 780px;
        opacity: 0;
    }
    100% {
        top: 450px;
    }
}

Refer - keyframes-sass-output.css Refer - Getting Compass to add vendor prefixes to animation selectors