Pure CSS Everlasting Love

Februari 01, 2015

gbr dr http://www.ccdowney.com

Assalaamu 'alaikum, Sobat! 'em so sorry for my lately post. Kali ini gue pengen nulis tentang "everlasting love". Artinya kurang lebih adalah "cinta tanpa akhir", "cinta yang bakalan selalu ada", "cinta yang gak bakal abis", atau apalah terserah elo pengen ngatiinnya gimana. Sebenernya kata-kata itu udah malang-melintang di mana-mana, di quote-quote tentang cinta, di lagu-lagu tentang cinta, di film-film tentang cinta, pokoknya yang berhubungan ama "love". Jujur gue sendiri tertarik ngedalemin kata-kata itu (apaan coba?), setelah gue ngeliat salah satu iklan pelembut dan pewangi yang yang nampilin dunia kain dengan boneka-boneka lucu yang lagi acara audisi vokal. Di iklan "mloto" itu si cewek kecil ikut audisi dengan nyanyiin sebuah lagu. Trus gue penasaran ama entu lagu. Jadi deh gue nanya ke nenek gayung, eh maksudnya nenek gugel pake macem-macem kata kunci. Mulai dari "lagu di iklan mloto", "soundtrack di iklan mloto", ampe bener-bener pake pertanyaan yang alay, "apakah lagu yang dinyanyiin ama si cewek kain di iklan pelembut mlotooooo???", trus search ... ng4L4y biNg9o kh4n?

Iklan Mloto

Ternyata itu lagu judulnya "everlasting love". Everlasting Love is a song written by Buzz Cason and Mac Gayden, originally a 1967 hit for Robert Knight and since remade several times, most successfully by Love Affair, Carl Carlton and Sandra. Trus lagu itu dinyanyiin ulang oleh beberapa penyanyi kayak U2, a duet version cut by Rex Smith and Rachel Sweet, UK boyband Worlds Apart, Gloria Estefan, Jammie Culun, dan masih banyak lagi versi-versi lainnya.

Nah, kalo yang di iklan "mloto mencari bakat" dan gue jadiin backsound di postingan I ❤ MFF kemaren, itu versinya Lizzie C. Keren kan animasinya? Padahal itu cuma dibuat pake CSS dan HTML doang, tanpa javascript, tanpa flash dan yang paling penting no buffering. Trus ada yang nanya, "itu buatnya pake apa?", "itu bikinnya gimana?", "udah makan belum?", eh gak ding ...

Lizzie C

So, di sini gue bakal share kodenya. Dan gue bener, itu cuma modal otak-atik CSS ama HTML doang, no javascript, no flash 'n no buffering. Check this code out!

CSS

body,html{width: 100%; height: 100%; text-align: center; margin: 0 auto;}
.container{margin-top: 250px; position: relative;vertical-align: center;}
.border-circle-one,.border-circle-two{width: 399px; height: 399px; position: absolute; left: 50%; top: 50%;margin-left: -200px; margin-top: -200px;
    border-radius: 100%;
    border: 10px solid #FCB040;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
}
.border-circle-one{
    animation:border-pulse 1s ease 3.1s infinite;
    animation-fill-mode: forwards;
    -webkit-animation:border-pulse 1s ease 3.1s 1;
    -webkit-animation-fill-mode: forwards;
}
.border-circle-two{
    animation:border-pulse 1s ease 3.3s infinite;
    animation-fill-mode: forwards;
    -webkit-animation:border-pulse 1s ease 3.3s 1;
    -webkit-animation-fill-mode: forwards;
}
@keyframes border-pulse{
    0%{
        -webkit-transform: scale(0);
        transform: scale(0);
        border-width: 20px;
    }
    40%{
        -webkit-transform: scale(1);
        transform: scale(1);
        border-width: 20px;
        margin-top: -220px;
        margin-left: -220px;
    }
    100%{
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        border-width: 0;
        border-style: double;
        margin-top: -200px;
        margin-left: -200px;
    }
}
@-webkit-keyframes border-pulse{
    0%{
        -webkit-transform: scale(0);
        transform: scale(0);
        border-width: 20px;
    }
    40%{
        -webkit-transform: scale(1);
        transform: scale(1);
        border-width: 20px;
        margin-top: -220px;
        margin-left: -220px;
    }
    100%{
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        border-width: 0;
        border-style: double;
        margin-top: -200px;
        margin-left: -200px;
    }
}
.background-circle{
    width: 400px;
    height: 400px;
    position: relative;
    border-radius: 100%;
    background: #95B3BF;
    overflow: hidden;
    margin:0 auto;
    -webkit-animation: grow 0.7s ease 1;
    animation: grow 0.7s ease 1;
    -webkit-mask-image:-webkit-radial-gradient(#BADA55, #BADA55);
}
@keyframes grow{
    0% {
        -webkit-transform: scale(0);
        transform : scale(0);
    }
    60% {
        -webkit-transform: scale(1.15);
        transform : scale(1.15);
    }
    80% {
        -webkit-transform: scale(0.95);
        transform : scale(0.95);
    }
    100%{
        -webkit-transform: scale(1);
        transform : scale(1);
    }
}
@-webkit-keyframes grow{
    0% {
        -webkit-transform: scale(0);
        transform : scale(0);
    }
    60% {
        -webkit-transform: scale(1.15);
        transform : scale(1.15);
    }
    80% {
        -webkit-transform: scale(0.95);
        transform : scale(0.95);
    }
    100%{
        -webkit-transform: scale(1);
        transform : scale(1);
    }
}
.triangle-light{
    width: 400px;
    height: 600px;
    position: absolute;
    right:-65%;
    background: #fff;
    opacity: 0.2;
    -webkit-transform: translate(200px,0px);
    transform: translate(200px,0px);
    -webkit-animation: triangle-light-anim 1s ease 2.8s 1;
    -webkit-animation-fill-mode : forwards;
    animation: triangle-light-anim 1s ease 2.8s 1;
    animation-fill-mode : forwards;
}
.triangle-dark{
    width: 400px;
    height: 600px;
    position: absolute;
    left:-60%;
    top:30%;
    background: #000;
    opacity: 0.2;
    -webkit-transform: translate(-200px,0px);
    transform: translate(-200px,0px);
    -webkit-animation: triangle-dark-anim 1s ease 3s 1;
    -webkit-animation-fill-mode : forwards;
    animation: triangle-dark-anim 1s ease 3s 1;
    animation-fill-mode : forwards;
}
@keyframes triangle-light-anim{
    0% {
        -webkit-transform: translate(200px,0px);
        transform: translate(200px,0px);
    }
    100%{
        -webkit-transform:rotate(45deg) translate(0px,0px);
        transform: rotate(45deg) translate(0px,0px);
    }
}
@-webkit-keyframes triangle-light-anim{
    0% {
        -webkit-transform: translate(200px,0px);
        transform: translate(200px,0px);
    }
    100% {
        -webkit-transform: rotate(45deg) translate(0px,0px);
        transform: rotate(45deg) translate(0px,0px);
    }
}
@keyframes triangle-dark-anim{
    0% {
        -webkit-transform: translate(-200px,0px);
        transform: translate(-200px,0px);
    }
    100%{
        -webkit-transform:rotate(-45deg) translate(0px,0px);
        transform: rotate(-45deg) translate(0px,0px);
    }
}
@-webkit-keyframes triangle-dark-anim{
    0% {
        -webkit-transform: translate(-200px,0px);
        transform: translate(-200px,0px);
    }
    100% {
        -webkit-transform: rotate(-45deg) translate(0px,0px);
        transform: rotate(-45deg) translate(0px,0px);
    }
}
.body{
    width: 285px;
    height: 600px;
    margin: 0 auto;
    top: 200px;
    position: relative;
    background: #222;
    border-radius: 100px;
}
.head{
    width: 196px;
    height: 260px;
    position: absolute;
    background: #FFE4B6;
    top:50%;
    left: 50%;
    margin-left: -98px;
    margin-top: -210px;
    border-radius: 48%;
    -webkit-animation:grow 0.7s 0.4s 1 ease, music-shake 1s 3.3s infinite alternate ease-in-out;
    animation:grow 0.7s 0.4s 1 ease, music-shake 1s 3.3s infinite alternate ease-in-out;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
}
@keyframes music-shake{
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    33% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    66% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes music-shake{
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    33% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    66% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.ear-left, .ear-right{
    width: 30px;
    height: 45px;
    position: absolute;
    top: 110px;
    border-radius: 40%;
    background: #FFE4BE;
    -webkit-animation: grow 0.7s 1.3s 1 ease;
    -o-animation: grow 0.7s 1.3s 1 ease;
    animation: grow 0.7s 1.3s 1 ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.ear-left{
    left: -12px;
}
.ear-right{
    right: -12px;
}
.eye-shadow{
    width: 30px;
    height: 15px;
    position: absolute;
    top: 85px;
    border-radius: 0 0 15px 15px;
    background: rgba(149,36,0,0.1);
    -webkit-animation: grow 0.7s 2s 1 ease;
    -o-animation: grow 0.7s 2s 1 ease;
    animation: grow 0.7s 2s 1 ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.eye-shadow#left{
    left: 35px;
}
.eye-shadow#right{
    right: 35px;
}
.eyebrow{
    width: 40px;
    height: 10px;
    background: #E7AB57;
    position: absolute;
    top: -35px;
    left: 50%;
    margin-left: -20px;
    opacity: 0;
}
.eye-shadow#left .eyebrow{
    -webkit-animation: eyebrow-anim-left 0.7s 2.2s 1 ease;
    -o-animation: eyebrow-anim-left 0.7s 2.2s 1 ease;
    animation: eyebrow-anim-left 0.7s 2.2s 1 ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.eye-shadow#right .eyebrow{
    -webkit-animation: eyebrow-anim-right 0.7s 2.2s 1 ease,eyebrow-up-down 1.8s 4s infinite alternate ease-in-out;
    -o-animation: eyebrow-anim-right 0.7s 2.2s 1 ease,eyebrow-up-down 1.8s 4s infinite alternate ease-in-out;
    animation: eyebrow-anim-right 0.7s 2.2s 1 ease,eyebrow-up-down 1.8s 4s infinite alternate ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes eyebrow-anim-left{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-25px);
        tranform: translateY(-25px);
    }
    70% {
        opacity: 1;
        -webkit-transform: translateY(5px);
        tranform: translateY(5px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        tranform: translateY(0px);
    }
}
@-webkit-keyframes eyebrow-anim-left{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-25px);
        tranform: translateY(-25px);
    }
    70% {
        opacity: 1;
        -webkit-transform: translateY(5px);
        tranform: translateY(5px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        tranform: translateY(0px);
    }
}
@keyframes eyebrow-anim-right{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-25px);
        tranform: translateY(-25px);
    }
    70% {
        opacity: 1;
        -webkit-transform: translateY(5px);
        tranform: translateY(5px);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(9deg) translateY(0px);
        tranform: rotate(9deg) translateY(0px);
    }
}
@-webkit-keyframes eyebrow-anim-right{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-25px);
        tranform: translateY(-25px);
    }
    70% {
        opacity: 1;
        -webkit-transform: translateY(5px);
        tranform: translateY(5px);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(9deg) translateY(0px);
        tranform: rotate(9deg) translateY(0px);
    }
}
@keyframes eyebrow-up-down{
    0% {
        top: -35px;
    }
    80% {
        top: -35px;
    }
    100% {
        top: -45px;
    }
}
@-webkit-keyframes eyebrow-up-down{
    0% {
        top: -35px;
    }
    80% {
        top: -35px;
    }
    100% {
        top: -45px;
    }
}
.eye{
    width: 20px;
    height: 28px;
    position: absolute;
    top: -18px;
    left: 50%;
    margin-left: -10px;
    border-radius: 10px;
    background: #334C68;
    -webkit-animation: grow 0.7s 2.2s 1 ease,eye-blink 4s 4.4s infinite alternate linear;
    -o-animation: grow 0.7s 2.2s 1 ease,eye-blink 4s 4.4s infinite alternate linear;
    animation: grow 0.7s 2.2s 1 ease,eye-blink 4s 4.4s infinite alternate linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scale(0);
    transform: scale(0);
}
@keyframes eye-blink{
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    45% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    50% {
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes eye-blink{
    0% {
        -webkit-transform: scaleY(1) translateY(0px);
        transform: scaleY(1) translateY(0px);
    }
    45% {
        -webkit-transform: scaleY(1) translateY(0px);
        transform: scaleY(1) translateY(0px);
    }
    50% {
        -webkit-transform: scaleY(0.1);
        transform: scaleY(0.1);
    }
    55% {
        -webkit-transform: scaleY(1) translateY(0px);
        transform: scaleY(1) translateY(0px);
    }
    100% {
        -webkit-transform: scaleY(1) translateY(0px);
        transform: scaleY(1) translateY(0px);
    }
}
.hair-main{
    width: 200px;
    height: 0;
    background: #222;
    border-radius: 300px 300px 0 0;
    margin-top: -28px;
    margin-left: -3px;
    position: relative;
    z-index: 2;
    -webkit-animation: hair-anim 0.7s ease 0.9s 1;
    animation: hair-anim 0.7s ease 0.9s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.nose{
    width: 20px;
    height: 45px;
    background: rgba(149,36,0,0.1);
    border-top-left-radius: 20px;
    position: absolute;
    top: 95px;
    left: 50%;
    margin-left: -20px;
    z-index: 5;
    -webkit-animation: grow 0.7s 2.5s 1 ease;
    -o-animation: grow 0.7s 2.5s 1 ease;
    animation: grow 0.7s 2.5s 1 ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.mouse{
    width: 76px;
    height: 33px;
    position: absolute;
    top: 150px;
    left: 50%;
    margin-left: -38px;
    border-radius: 0 0 33px 33px;
    background: #fff;
    -webkit-animation: grow 0.7s 3s 1 ease;
    -o-animation: grow 0.7s 3s 1 ease;
    animation: grow 0.7s 3s 1 ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.mouse-wrapper{
    width: 86px;
    height: 43px;
    position: absolute;
    top: -16px;
    left: -8px;
    border-radius: 0 0 43px 0;
    background: #FFE4B6;
}
@keyframes hair-anim{
    0% {
        height: 0;
        transform: translateY(150px);
    }
    100% {
        height: 150px;
        transform: translateY(0);
    }
}
@-webkit-keyframes hair-anim{
    0% {
        height: 0;
        -webkit-transform: translateY(150px);
    }
    100% {
        height: 150px;
        -webkit-transform: translateY(0px);
    }
}
.face{
    width: 180px;
    height: 0;
    border-radius: 48px 48px 0 0;
    background: #FFE4BE;
    position: absolute;
    top: 40px;
    left: 8px;
    z-index: 3;
    -webkit-animation: face-anim 0.1s linear 0.8s 1;
    animation: face-anim 0.1s linear 0.8s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes face-anim{
    0% {
        height: 0;
        transform: translateY(130px);
    }
    100% {
        height: 130px;
        transform: translateY(0);
    }
}
@-webkit-keyframes face-anim{
    0% {
        height: 0;
        -webkit-transform: translateY(130px);
    }
    100% {
        height: 130px;
        -webkit-transform: translateY(0px);
    }
}
.music-note{
    position: absolute;
    font-size: 150px;
    color: #FCB040;
    width: 1px;
    left: 50%;
    opacity: 0;
}
.music-note#one{
    margin-left: -250px;
    top: 50%;
    -webkit-animation: note-anim 2s ease 3.5s infinite;
    animation: note-anim 2s ease 3.5s infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.music-note#two{
    margin-left: 150px;
    top: 30%;
    -webkit-animation: note-anim 2s ease 4.3s infinite;
    animation: note-anim 2s ease 4.3s infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes note-anim{
    0% {
        opacity: 0;
        -webkit-transform: translate(0px,50px);
        transform: translate(0px,50px);
    }
    30% {
        -webkit-transform: rotate(12deg) translate(-30px,0px);
        transform: rotate(12deg) translate(-30px,0px);
    }
    45% {
        opacity: 1;
    }
    60% {
        -webkit-transform: rotate(-12deg) translate(30px,-100px);
        transform: rotate(-12deg) translate(30px,-100px);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0deg) translate(0px,-200px);
        transform: rotate(0deg) translate(0px,-200px);
    }
}
@-webkit-keyframes note-anim{
    0% {
        opacity: 0;
        -webkit-transform: translate(0px,50px);
        transform: translate(0px,50px);
    }
    30% {
        -webkit-transform: rotate(12deg) translate(-30px,0px);
        transform: rotate(12deg) translate(-30px,0px);
    }
    45% {
        opacity: 1;
    }
    60% {
        -webkit-transform: rotate(-12deg) translate(30px,-100px);
        transform: rotate(-12deg) translate(30px,-100px);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0deg) translate(0px,-200px);
        transform: rotate(0deg) translate(0px,-200px);
    }
}
.shirt-text{
    font-family: "Microsoft Yahei";
    font-weight: 700;
    color: white;
    position: relative;
    top: -300px;
    font-size: 50px;
    display: inline-block;
    -webkit-text-stroke: 2px;
    -webkit-transform: translate(0px,100px);
    transform: translate(0px,100px);
    animation-fill-mode: forwards !important;
    -webkit-animation-fill-mode: forwards !important;
}
.shirt-text:nth-of-type(1){
    animation: text-anim 0.7s 3s 1 ease;
    -webkit-animation: text-anim 0.7s 3s 1 ease;
}
.shirt-text.two{
    color: #EF4136;
    animation: text-anim 0.7s 3.1s 1 ease;
    -webkit-animation: text-anim 0.7s 3.1s 1 ease;
}
.shirt-text.three{
    animation: text-anim 0.7s 3.2s 1 ease;
    -webkit-animation: text-anim 0.7s 3.2s 1 ease;
}
.shirt-text.four{
    animation: text-anim 0.7s 3.3s 1 ease;
    -webkit-animation: text-anim 0.7s 3.3s 1 ease;
}
.shirt-text.five{
    animation: text-anim 0.7s 3.4s 1 ease;
    -webkit-animation: text-anim 0.7s 3.4s 1 ease;
}
@keyframes text-anim{
    0% {
        -webkit-transform: translate(0px,100px);
        transform: translate(0px,100px);
    }
    60% {
        -webkit-transform:translate(0px,-20px);
        transform:translate(0px,-20px);
    }
    80% {
        -webkit-transform:translate(0px,15px);
        transform:translate(0px,15px);
    }
    100% {
        -webkit-transform:translate(0px,0px);
        transform:translate(0px,0px);
    }
}
@-webkit-keyframes text-anim{
    0% {
        -webkit-transform: translate(0px,100px);
        transform: translate(0px,100px);
    }
    60% {
        -webkit-transform:translate(0px,-20px);
        transform:translate(0px,-20px);
    }
    80% {
        -webkit-transform:translate(0px,15px);
        transform:translate(0px,15px);
    }
    100% {
        -webkit-transform:translate(0px,0px);
        transform:translate(0px,0px);
    }
}
html,body{margin: 0; padding:0; width: 100%; height: 100%;color: #FFB9D5;font-weight: bold;font-family: "microsoft yahei";}
.f100{font-size: 100px;}
.f80{font-size: 80px;}
.f50{font-size: 50px;}
.f30{font-size: 30px;}
.color1{
    color: #bee358;
}
.color3{
    color: #2d9dab;
}
.color4{
    color: #FFB9D5;
}
.color5{
    color: #EE3AB4;
}
.container{
    width:700px;
    height: 500px;
    margin: 250px auto;
    position: relative;
    background: #CBF6E0;
    border-radius: 10%;
    border: 5px solid #e7e6ca;
}
.word1{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -50px;
    opacity: 0;
    -webkit-animation: rotateOut 3s ease-in-out 0.5s 1;
    animation: rotateOut 3s ease-in-out 0.5s 1;
}
.word2{
}
.word2 span{
    position: absolute;
    opacity: 0;
}
.word2 .span1{
    top: 40px;
    left: 40px;
    -webkit-animation:translateOut1 5s linear 3.5s 1;
    animation:translateOut1 5s linear 3.5s 1;
}
.word2 .span2{
    top: 180px;
    left: 150px;
    -webkit-animation:rotateOut 3.5s linear 5s 1;
    animation:rotateOut 3.5s linear 5s 1;
}
.word2 .span3{
    top: 180px;
    left: 270px;
    -webkit-animation:rotateOut 2.7s linear 5.8s 1;
    animation:rotateOut 2.7s linear 5.8s 1;
}
.word2 .span4{
    top: 180px;
    left: 390px;
    -webkit-animation:rotateOut 1.9s linear 6.6s 1;
    animation:rotateOut 1.9s linear 6.6s 1;
}
.word3 .span1{
    position: absolute;
    top:230px;
    left: 100px;
    opacity: 0;
    -webkit-animation: translateOut1 7s linear 9s 1;
    animation: translateOut1 7s linear 9s 1;
}
.word3 .span2{
    position: absolute;
    top:330px;
    left: 100px;
    opacity: 0;
    -webkit-animation: rotateOut 5s linear 11s 1;
    animation: rotateOut 5s linear 11s 1;
}
.word4 .span1{
    position: absolute;
    top: 30px;
    right: 30px;
    opacity: 0;
    -webkit-animation: translateOut2 5s linear 16s 1;
    animation: translateOut2 5s linear 16s 1;
}
.word4 .span2{
    position: absolute;
    top: 200px;
    left: 30px;
    opacity: 0;
    -webkit-animation: translateOut1 3s linear 18s 1;
    animation: translateOut1 3s linear 18s 1;
}
.word5 .span1{
    position: absolute;
    top: 300px;
    right: 180px;
    opacity: 0;
    -webkit-animation: rotateOut 5s linear 21.2s 1;
    animation: rotateOut 5s linear 21.2s 1;
}
.word5 .span2{
    position: absolute;
    top: 50px;
    left: 60px;
    opacity: 0;
    -webkit-animation: translateOut1 5s linear 20.2s 1;
    animation: translateOut1 5s linear 20.2s 1;
}
.word6 .span1{
    position: absolute;
    top: 300px;
    right: 130px;
    opacity: 0;
    -webkit-animation: rotateOut 5s linear 25.4s 1;
    animation: rotateOut 5s linear 25.4s 1;
}
.word6 .span2{
    position: absolute;
    top: 120px;
    left: 80px;
    opacity: 0;
    -webkit-animation: translateOut1 5s linear 24.4s 1;
    animation: translateOut1 5s linear 24.4s 1;
}
.word7 .span1{
    position: absolute;
    top: 200px;
    right: 60px;
    opacity: 0;
    -webkit-animation: rotateOut 5s linear 29.6s 1;
    animation: rotateOut 5s linear 29.6s 1;
}
.word7 .span2{
    position: absolute;
    top: 40px;
    left: 0px;
    opacity: 0;
    -webkit-animation: translateOut1 5s linear 28.6s 1;
    animation: translateOut1 5s linear 28.6s 1;
}
.word8 .span1{
    position: absolute;
    top: 70px;
    right: 80px;
    opacity: 0;
    -webkit-animation: rotateOut 7s linear 33.8s 1;
    animation: rotateOut 7s linear 33.8s 1;
}
.word8 .span2{
    position: absolute;
    top: 250px;
    left: 30px;
    opacity: 0;
    -webkit-animation: translateOut1 5s linear 32.8s 1;
    animation: translateOut1 5s linear 32.8s 1;
}
.word9 span{
    position: absolute;
    bottom: 50px;
    right: 80px;
    opacity: 0;
    -webkit-animation: nameOut 3s ease-in 38s 1;
    animation: nameOut 3s ease-in 38s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes rotateOut{
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(180deg);
        transform: scale(0) rotate(180deg);
    }
    20% {
        opacity: 0.6;
        -webkit-transform: scale(1.35) rotate(0deg);
        transform: scale(1.35) rotate(0deg);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(1.35) rotate(0deg);
        transform: scale(1.35) rotate(0deg);
    }
    90% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}
@keyframes rotateOut{
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(180deg);
        transform: scale(0) rotate(180deg);
    }
    20% {
        opacity: 0.6;
        -webkit-transform: scale(1.35) rotate(0deg);
        transform: scale(1.35) rotate(0deg);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(1.35) rotate(0deg);
        transform: scale(1.35) rotate(0deg);
    }
    90% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}
@-webkit-keyframes translateOut1{
    0% {
        opacity: 0;
        -webkit-transform:translate(0px,0px) scale(0.5);
        transform:translate(0px,0px) scale(0.5);
    }
    10% {
        opacity: 1;
        -webkit-transform:translate(20px,20px) scale(1);
        transform:translate(20px,20px) scale(1);
    }
    100% {
        opacity: 1;
        -webkit-transform:translate(20px,20px);
        transform:translate(20px,20px);
    }
}
@keyframes translateOut1{
    0% {
        opacity: 0;
        -webkit-transform:translate(0px,0px) scale(0.5);
        transform:translate(0px,0px) scale(0.5);
    }
    10% {
        opacity: 1;
        -webkit-transform:translate(20px,20px) scale(1);
        transform:translate(20px,20px) scale(1);
    }
    100% {
        opacity: 1;
        -webkit-transform:translate(20px,20px);
        transform:translate(20px,20px);
    }
}
@-webkit-keyframes translateOut2{
    0%{
        opacity: 1;
        -webkit-transform:translate(0px,0px);
        transform:translate(0px,0px);
    }
    10% {
        opacity: 1;
        -webkit-transform: translate(-50px,30px);
        transform: translate(-50px,30px);
    }
    13% {
        opacity: 1;
        -webkit-transform: translate(-50px,20px);
        transform: translate(-50px,20px);
    }
    15% {
        opacity: 1;
        -webkit-transform: translate(-50px,30px);
        transform: translate(-50px,30px);
    }
    20% {
        opacity: 1;
        -webkit-transform: translate(-50px,30px);
        transform: translate(-50px,30px);
    }
    30% {
        opacity: 1;
        -webkit-transform: translate(-100px,60px);
        transform: translate(-100px,60px);
    }
    33% {
        opacity: 1;
        -webkit-transform: translate(-100px,50px);
        transform: translate(-100px,50px);
    }
    35% {
        opacity: 1;
        -webkit-transform: translate(-100px,60px);
        transform: translate(-100px,60px);
    }
    40% {
        opacity: 1;
        -webkit-transform: translate(-100px,60px);
        transform: translate(-100px,60px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
    53% {
        opacity: 1;
        -webkit-transform: translate(-150px,80px);
        transform: translate(-150px,80px);
    }
    55% {
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
}
@keyframes translateOut2{
    0%{
        opacity: 1;
        -webkit-transform:translate(0px,0px);
        transform:translate(0px,0px);
    }
    10% {
        opacity: 1;
        -webkit-transform: translate(-50px,30px);
        transform: translate(-50px,30px);
    }
    13% {
        opacity: 1;
        -webkit-transform: translate(-50px,20px);
        transform: translate(-50px,20px);
    }
    15% {
        opacity: 1;
        -webkit-transform: translate(-50px,30px);
        transform: translate(-50px,30px);
    }
    20% {
        opacity: 1;
        -webkit-transform: translate(-50px,30px);
        transform: translate(-50px,30px);
    }
    30% {
        opacity: 1;
        -webkit-transform: translate(-100px,60px);
        transform: translate(-100px,60px);
    }
    33% {
        opacity: 1;
        -webkit-transform: translate(-100px,50px);
        transform: translate(-100px,50px);
    }
    35% {
        opacity: 1;
        -webkit-transform: translate(-100px,60px);
        transform: translate(-100px,60px);
    }
    40% {
        opacity: 1;
        -webkit-transform: translate(-100px,60px);
        transform: translate(-100px,60px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
    53% {
        opacity: 1;
        -webkit-transform: translate(-150px,80px);
        transform: translate(-150px,80px);
    }
    55% {
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
    100%{
        opacity: 1;
        -webkit-transform: translate(-150px,90px);
        transform: translate(-150px,90px);
    }
}
@-webkit-keyframes nameOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes nameOut{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

HTML

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>love letter</title>
    <link href="css/loveLetter.css" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container">
        <div style="opacity: 0.1">
        <div class="border-circle-one"></div>
        <div class="border-circle-two"></div>
        <div class="background-circle">
            <div class="triangle-light"></div>
            <div class="body"></div>
            <span class="shirt-text">I</span>
            <span class="shirt-text two">&#10084;</span>
            <span class="shirt-text three">M</span>
            <span class="shirt-text four">F</span>
            <span class="shirt-text five">F</span>
            <div class="triangle-dark"></div>
        </div>
        <div class="head">
            <div class="ear-left"></div>
            <div class="ear-right"></div>
            <div class="hair-main"></div>
            <div class="face">
                <div class="eye-shadow" id="left">
                    <div class="eyebrow"></div>
                    <div class="eye"></div>
                </div>
                <div class="eye-shadow" id="right">
                    <div class="eyebrow"></div>
                    <div class="eye"></div>
                </div>
                <div class="nose"></div>
                <div class="mouse">
                    <div class="mouse-wrapper"></div>
                </div>
            </div>
        </div>
        <span class="music-note" id="one">&#9835;</span>
        <span class="music-note" id="two">&#9834;</span>
        </div>
        <div class="word1 f100">
            <span class="">Hai,</span>
        </div>
        <div class="word2 f80 color3">
            <span class="span1">Apa kabar?</span>
            <span class="span2">It's</span>
            <span class="span3">&#10084;</span>
            <span class="span4">4 U</span>
        </div>
        <div class="word3 f50 color4">
            <span class="span1">Saat itu,</span>
            <span class="span2">12/07/2013</span>
        </div>
        <div class="word4 f80 color4">
            <span class="span1">pertama kali</span>
            <span class="span2">diterima masuk</span>
        </div>
        <div class="word5 f80 color3">
            <span class="span1">Mbak Latree</span>
            <span class="span2 f50">yang nginterview</span>
        </div>
        <div class="word6 f80 color4">
            <span class="span1">Mbak Isti</span>
            <span class="span2 f50">dan</span>
        </div>
        <div class="word7 f80 color3">
            <span class="span1">belajar FF</span>
            <span class="span2 f50">Seneng banget</span>
        </div>
        <div class="word8 f80 color4">
            <span class="span1 f50">Met Ultah ke 2, MFF.&#10084;</span>
            <span class="span2 f50">EVERLASTING LOVE &#10047;</span>
        </div>
        <div class="word9 f30 color4">
            <span>by: eksak</span>
        </div>
    </div>
  <audio src="http://cs1.mp3.pm/listen/40477976/RDlWM0VTRXpYM2JBbHcwVUVGSTl4c1UxS2hzYm1ZU2E3b0srQS9Ba0ZLTkd2UHhEQ1lrVkt1K0tuY3hIMk9UTzJoSm96a3FzaThjWUxBU1hUbWFYMnc9PQ/Lizzie_C_-_Everlasting_Love_(mp3.pm).mp3" autoplay="autoplay" loop="loop" style="display: none;"></audio>
</body>
</html>

Bisa elo pasang di postingan kayak gue, atau boleh juga dipasang di widget. Konsep sebenernya adalah kartu ucapan, so elo bisa persembahin buat siapa aja dan dalam momen apa aja. Ultah, kawinan, sunatan, dkk. Seperti itu (gaya Syahrini), Sob! Moga bermanfaat. :)

Happy Blogging 'n Keep On Fire!

Wassalaam ... ^_^