<div>
  <p class="hide">
    <span>寿司、</span><br />
    <span>ι£ŸγΉγŸγ„γ€‚πŸ£</span>
  </p>
</div>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');

span {
  color: #FFF;
  font-size: 100vw / 1200 * 36;
  font-family: 'Noto Sans JP';
  
  @media (max-width: 750px) {
    font-size: 750px / 1200 * 36;
  }
  
  @media (min-width: 1601px) {
    font-size: 1600px / 1200 * 36;
  }
}

div {
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  position: relative;
  cursor: pointer;
  
  &:before {
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 100%;
    content: '';
    background: #000;
    transition: width .2s .2s ease-in-out;
  }
  
  &:after {
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 100%;
    content: '';
    background: #FFF;
    transition: width .2s ease-in-out;
  }
  
  &.hide {
    &:before {
      width: 100%;
      transition: width 0s ease-in-out;
    }

    &:after {
      width: 100%;
      transition: width 0s ease-in-out;
    }
  }
}

span {
  display: inline-block;
  padding: 16px;
  background: #000;
}
View Compiled
document.body.addEventListener('click', () => {
  document.querySelector('p').classList.add('hide');
  setTimeout(() => {
    document.querySelector('p').classList.remove('hide');
  }, 200);
});

setTimeout(() => {
  document.body.dispatchEvent(new Event('click'));
}, 800);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.