block animation

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<h1 class="h1">block animation</h1>

<div class="wrap">

  <div class="inner" id="js-query-action">
    <section class="section">
      <a class="block" href=""><span>HOVER</span></a>
    </section>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">

SCSS

body {
	width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1.2em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding-right: 1em;
  padding-left: 1em;
	min-width: 300px;
}

.section {
  max-width: 480px;
  padding: 1em;
  border: 6px double currentColor;
}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  font-size: 32px;
  background-color: rgba(white, .35);
  transition: .4s .25s ease-out;
  //
  &::after,
  &::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    pointer-events: none;
  }
  //
  &::after {
    background: #00889b;
    transition: all 0.25s 0.25s ease-in;
  }
  //
   &::before {
    z-index: 3;
    background: #ccaa77;
    transition: all 0.25s ease-in;
  }
  //
  > span {
    position: relative;
    z-index: 4;
  }
  //
  &:hover {
    text-decoration: none;
    color: white;
    letter-spacing: .1em;
    font-size: 25vw;
    //
    &::after {
      top: 0;
      transition: all 0.25s ease-out;
    }
    //
    &::before {
      top: 0;
      transition: all 0.25s 0.25s ease-out;
    }
  }
  
}