<h1 class="h1" data-h1 id="h1">Hello World</h1>
<a class="a" href="#h1" data-a>Run Animation</a>
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, 
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  font-family: sans-serif;
  background-color: #fffeca;
  color: #00f;
}

.h1 {
  margin: auto;
  font-size: 10vmin;
  text-align: center;
  
  // transform: translateY(100%);
  // opacity: 0;
}

a {
  position: absolute;
  top: 20px;
  left: 50%;
  padding: 6px 10px 5px 10px;
  
  text-align: center;
  text-decoration: none;
  border: 1px solid #00f;
  border-radius: 3px;

  transform: translateX(-50%);
}
View Compiled 
const h1 = document.querySelector('[data-h1]')
const a = document.querySelector('[data-a]')

a.addEventListener('click', clickHandler)

function clickHandler(event) {
  event.preventDefault()
 
  h1.animate({
    transform: [ 'translateY(100%)', 'translateY(0%)' ], 
    opacity: [ 0, 1 ],
    easing: 'ease-out',
  }, {
    duration: 1000,
    fill: 'both'
  }) 
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.