css transition サンプル

css transition のサンプルを作ってみる

github.com

@mixin border-animation($dimension, $easing ,$pipe ) {
  transition: $transition_duration $dimension $easing border-pipeline($transition_duration, $pipe);
  -web-kit-transition: $transition_duration $dimension $easing border-pipeline($transition_duration, $pipe);
}

.box {
  @include box();
  transition: ($transition_duration*$pipes)+$transition_duration ease-out;
  &:before {
    position: absolute;
    width: 0;
    height: $stroke;
    content: '';
    background: $item_color;
    top: -$stroke;
    left: -$stroke;
    @include border-animation(width, ease, 3);
  }
  &:after {
    position: absolute;
    width: $stroke;
    height: 0;
    content: '';
    background: $item_color;
    top: -$stroke;
    right: -$stroke;
    @include border-animation(height, ease, 2);
  }
  &-inner:after {
    position: absolute;
    width: 0;
    height: $stroke;
    content: '';
    background: $item_color;
    bottom: -$stroke;
    right: -$stroke;
    @include border-animation(width, ease, 1);
  }
  &-inner:before {
    position: absolute;
    width: $stroke;
    height: 0;
    content: '';
    background: $item_color;
    bottom: -$stroke;
    left: -$stroke;
    @include border-animation(height, ease, 0);
  }
  &:hover {
    border-color: transparent;
    background: darken($primary_color, 30);
    &:before {
      width: $pipeline_width;
      @include border-animation(width, ease, 0);
    }
    &:after {
      height: $pipeline_height;
      @include border-animation(height, ease, 1);
    }
    .box-inner:after {
      width: $pipeline_width;
      @include border-animation(width, ease, 2);
    }
    .box-inner:before {
      height: $pipeline_height;
      @include border-animation(height, ease, 3);
    }
  }
}

beforeとafterを駆使するのか、 今までcssはほとんど書いてないけれどScssを使ってプログラミングすることは、なかなか楽しいかも。 transitionの動作をもう少し研究しよう。