isTKS™tool,web-design ≫ gulp-sassで、SassコンパイルしてCSS3アニメーション

gulp-sassで、SassコンパイルしてCSS3アニメーション

2016.09.08

@mixinと@keyframesを使って、
gulp-sassで、SassコンパイルしてCSS3アニメーションする簡単メモ。

>>> xxxx.scss
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@include keyframes(bodyShow){
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

body {
    @include animation(bodyShow 1s ease 10s);
}

上2つのコードは、@include用に別ファイルとして置いておくと便利。
下2つのコードは、animationしたい場所と内容ごとに記述する。

※注意点としては、#{$animation-name}で書かないとコンパイル後に生成されたCSS内で変数が正しく展開されていないので注意。

  • このエントリーをはてなブックマークに追加