CSSとjQueryでアニメーション付きのYoutube再生ボタンを作る

Youtubeの再生ボタンはSVGでできていて、非常に滑らかにアニメーションします。これをCSSだけで作ったので紹介したいと思います。jQueryもほんの少しだけ使っていますが、クラスを付けたり消したりするためだけに使いました。

デモ

クリックすると再生ボタンの形になります。

HTML/CSS

.youtube-play {
  position: relative;
  margin: 0 auto;
  width: 40px;
  height: 48px;
  cursor: pointer;
}
.youtube-play:before, .youtube-play:after {
  position: absolute;
  top: 50%;
  width: 0;
  height: 100%;
  content: '';
  border-top: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 14px solid #fff;
  transform: translate3d(0, -50%, 0);
}
.youtube-play:before {
  left: 0;
  -webkit-transition: 0.18s linear;
  -moz-transition: 0.18s linear;
  -o-transition: 0.18s linear;
  transition: 0.18s linear;
}
.youtube-play:after {
  right: 0;
  -webkit-transition: 0.18s ease;
  -moz-transition: 0.18s ease;
  -o-transition: 0.18s ease;
  transition: 0.18s ease;
}
.youtube-play.active:before, .youtube-play.active:after {
  border-top-width: 12px;
  border-left-width: 20px;
  border-bottom-width: 12px;
}
.youtube-play.active:after {
  height: 0;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}

擬似要素の :before :after がそれぞれ左、右部分に対応しています。transition の秒数をもう少し変えたほうがいいかもしれません。

jQuery

$('.youtube-play').on('click', function(){
  $(this).toggleClass('active');
});

SCSS

@mixin transition($speed: .29s, $type: ease) {
  -webkit-transition: $speed $type;
  -moz-transition: $speed $type;
  -o-transition: $speed $type;
  transition: $speed $type;
}
@mixin translate3d($x: 0, $y: 0, $z: 0) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

.youtube-play {
  $width: 40px;  // ボタンの横幅
  $height: 48px; // ボタンの縦幅
  $pause-border: 14px; // 停止ボタンの線の横幅
  position: relative;
  width: $width;
  height: $height;
  cursor: pointer;
  &:before, &:after {
    position: absolute;
    top: 50%;
    width: 0;
    height: 100%;
    content: '';
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    border-left: $pause-border solid #fff;
    @include translate3d(0, -50%, 0);
  }
  &:before {
    left: 0;
    @include transition(0.18s, linear);
  }
  &:after {
    right: 0;
    @include transition(0.18s, ease);
  }
  &.active {
    &:before, &:after {
      border-top-width: $height / 4;
      border-left-width: $width / 2;
      border-bottom-width: $height/ 4;
    }
    &:after {
      height: 0;
      @include transition(0.2s, linear);
    }
  }
}

SCSSを使えば、自動的に計算されるので、簡単にサイズ変更が可能です。15, 16, 17行目の変数の値を設定するだけであとは自動的に計算されます。