今日のCSSアニメーション その2

最近は隙を見て Code Pen に投稿することが趣味のひとつとなっています。
今回もCSSアニメーションで謎の演出をつくってみました。
box-shodow の insetをつかってみたかっただけなので、とてもシンプルな仕上がりとなっています。

DEMO

See the Pen hello world. by kimmy (@kimmy) on CodePen.

HTML

<div class="hole">
  <p class="txt">HELLO WORLD.</p>
</div>

SCSS

html, body {
  height: 100%;
}

.hole {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  border-radius: 50%;
  width: 200px; height: 200px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, .8) inset;

  &:hover {
    .txt {
      left: -127px;
    }
  }
}

.txt {
  position: absolute;
  left: 33px;
  width: 320px; height: 200px;
  font: 40px "AvenirNext-Heavy" bold;
  line-height: 200px;
  transition: left ease .2s;
}