.wm-hero.js-animate
  .wm-hero__inner.container
    h1 Your one-stop-shop for<br>random music album covers
    img(src="https://api.lorem.space/image/album?w=960&h=600", alt="Random cover album", width="960", height="600")
View Compiled
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

  @media screen and (min-width: 481px) {
    max-width: 540px;
  }

  @media screen and (min-width: 769px) {
    max-width: 720px;
  }

  @media screen and (min-width: 981px) {
    max-width: 960px;
  }
}

.wm-hero {
  --duration1: 2.5s;
  --duration2: calc(var(--duration1) / 2);
  --delay1: calc(var(--duration2) / 2);
  --delay2: calc(var(--duration2) + var(--delay1));
  --easing: cubic-bezier(0.65, 0.05, 0.36, 1);
  background-color: wheat;
  overflow: hidden;
  text-align: center;

  h1 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2em;
    margin-bottom: 2em;
    opacity: 0;
    transform: translateY(3em);
    animation: loadH1 var(--duration1) var(--easing) var(--delay1) forwards;

    @media screen and (min-width: 981px) {
      font-size: 56px;
    }
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 1em 1em 0 0;
    transform: translateY(100%);
    animation: loadImg var(--duration2) var(--easing) var(--delay2) forwards;
  }
}

@keyframes loadH1 {
  0% {
    opacity: 0;
    transform: translateY(3em);
  }
  30%,
  50% {
    opacity: 1;
    transform: translateY(3em);
  }
  100% {
    opacity: 1;
    transform: none; 
  }
}

@keyframes loadImg {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: none; 
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.