<div class="unbreakable-container">  
  <div class="unbreakable">
    <span class="un">UN</span><span class="break">BREAK</span><span class="able">ABLE</span>
  </div>
  <div class="ks">Kimmie Schmidt</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Anton);

body
{
    background: #000;
}
.unbreakable-container
{
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.unbreakable
{
    font-family: 'Anton', sans-serif;
    line-height: 1;

    letter-spacing: -.07em;

    color: #fff;
}

.ks
{
    font-family: 'Anton', sans-serif;
    font-size: 45px;
    line-height: 1;

    margin-top: -11px;

    -webkit-transition: all .3s ease-in-out;
            transition: all .3s cubic-bezier(.190, 1.000, .220, 1.000) 3s;
    -webkit-transform: translateX(-1000%);
        -ms-transform: translateX(-1000%);
            transform: translateX(-1000%);
    letter-spacing: -1px;
    text-transform: uppercase;

    color: #fc0;
}

.animate .ks
{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

span
{
    font-family: 'Anton', Helvetica, sans-serif;
    font-size: 40px;

    text-transform: uppercase;

    opacity: 0;
    color: #fff;

    filter: alpha(opacity=0);
}

.able
{
    -webkit-transition: all .3s cubic-bezier(.190, 1.000, .220, 1.000) 2.3s;
            transition: all .3s cubic-bezier(.190, 1.000, .220, 1.000) 2.3s;
    letter-spacing: -.07em;
}

.break
{
    -webkit-transition: all .3s ease-in-out 2s;
            transition: all .3s ease-in-out 2s;
    letter-spacing: -.07em;
}

.un
{
    -webkit-transition: all .3s ease-in-out 1.7s;
            transition: all .3s ease-in-out 1.7s;
    letter-spacing: -.07em;
}

.animate .un
{
    font-size: 40px;

    -webkit-transform: scale(1.5,1.5);
        -ms-transform: scale(1.5,1.5);
            transform: scale(1.5,1.5);

    opacity: 1;

    filter: alpha(opacity=100);
}

.animate .break
{
    font-size: 60px;

    -webkit-transform: scale(1.5,1.5);
        -ms-transform: scale(1.5,1.5);
            transform: scale(1.5,1.5);

    opacity: 1;

    filter: alpha(opacity=100);
}

.animate .able
{
    font-size: 80px;

    -webkit-transform: scale(1.5,1.5);
        -ms-transform: scale(1.5,1.5);
            transform: scale(1.5,1.5);

    opacity: 1;

    filter: alpha(opacity=100);
}

var hotbod = document.querySelector("body");

function doStuff() {
    hotbod.className += " animate";
}

window.onload = function() {
    doStuff();
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.