,

[Sass & Compass] Compass: CSS3 animation の prefix 付きコードを生成する

公開日: 2014/08/16
更新日: 2018/11/13

CSS3 animation の prefix が面倒なので Compass で楽したい。

Contents

利用する mixin と prefix

CSS を生で書こうとするとなかなかつらい。
prefix も正確なところが不安なので mixin を使います。

CSS3 Transforms

CSS3 Animation

つかいかた

Compass mixin を使って書きます。

.scss
.activeslide {
  @include animation(move 9s ease infinite);
}
@include keyframes(move) {
  from {
    @include transform(scale(1.2));
  }
  to {
    @include transform(scale(1.0));
  }
}

このような CSS を生成してくれました。

.css
.activeslide {
  -moz-animation: move 9s ease infinite;
  -webkit-animation: move 9s ease infinite;
  animation: move 9s ease infinite;
}
@-moz-keyframes move {
  from {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }
  to {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes move {
  from {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes move {
  from {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  to {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
demo

たすかる。

補遺