titel klaartje

by Johan Vandeplas

HTML

<div class="title">

    <div class="h1">Klaartje De Voecht</div>
    <div class="h1mask"></div>
    <div class="h2">Photographer and Designer</div>
</div>

CSS

body {
    background-color: #3f4040;
    font-family:"Arial";
    height: 100%;
    overflow-x: hidden;
}
.title {
    margin-top: 200px;
    color: #FFFFFF;
    text-align: center;
}
.title div {
    text-transform: uppercase;
}
.h1 {
    font-weight: bold;
    font-size: 50px;
    -webkit-animation: mylast 4s;
}
.h1mask {
    display: block;
    position: relative;
    float: right;
    background-color: #3f4040;
    width: 0%;
    height: 0px;
    margin: -50px 0px;
    padding: 25px 0;
    animation: mySecond 5s;
    -webkit-animation: mySecond 3s;
}
.h2 {
    color: #CCCCCC;
    font-size: 34px;
    animation: myfirst 4s;
    -webkit-animation: myfirst 4s;
}
@keyframes myfirst {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes myfirst {
    0% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes mySecond {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}
@-webkit-keyframes mySecond {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}
@keyframes mylast {
    0% {
        color: #909090;
    }
    55% {
        color: #909090;
    }
    100% {
        color: #FFFFFF;
    }
}
@-webkit-keyframes mylast {
    0% {
        color: #909090;
    }
    55% {
        color: #909090;
    }
    100% {
        color: #FFFFFF;
    }
}