<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Oswald:500" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>031618</title>
</head>
<body>
    <div class="main-section">
        <div class="main-content">
            <div class="main-content-one">
                <div class="text">Work</div>
            </div>
            <div class="main-content-two">
                <div class="text">harder</div>
            </div>
            <div class="rectangle"></div>
        </div>
        
    </div>
// Global Style

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Oswald', sans-serif;
}

// Main Style

.main-section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #161616;
}

.main-content {
    height: auto;
    position: relative;
    // border: 1px solid #fff;

    &-one  {
        height: auto;
        // border: 1px solid #fff;
        overflow: hidden;

        .text {            
            font-size: 5rem;
            color: #fff ;
            text-transform: uppercase;
            line-height: 5rem;
            position: relative;
            animation: animation-one;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(.68,.12,0,.99);
            }
    }

    &-two {
        height: auto;
        // border: 1px solid #fff;
        overflow: hidden;

        .text {            
            font-size: 5rem;
            color: #fff ;
            text-transform: uppercase;
            line-height: 5rem;
            bottom: -5rem;
            position: relative;
            animation: animation-one;
            animation-duration: 2s;
            animation-delay: 1s;
            animation-fill-mode: forwards;
            animation-timing-function: cubic-bezier(.68,.12,0,.99);
        }
    }
}

@keyframes animation-one {
    0% {
        bottom: -5rem;
    }

    100% {
        bottom: 0;
    }
}

.rectangle {
    border: .5rem solid #7144c5;
    position: absolute;
    bottom: 0;
    right: -2rem;
    animation: animation-rectangle;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.68,.12,0,.99);
}

@keyframes animation-rectangle {
    0% {
        width: 1%;
        height: 1%;
    }

    100% {
        width: 120%;
        height: 120%;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.