Membuat efek pure css3 lava lamp menu

Hay sobat selamat pagi,... salam olahraga,.. ckcckckkk
Setelah kemarin saya belajar mengenai Efek Lava Lamp dari mas Andrey sekarang saya akan menerapkan nya disini sebelum nya saya ucapkan terima kasih babyak buat Mas Andrey.
Saya berpikir bahwa sobat telah melihat menu animasi dengan efek Lava Lamp (berdasarkan jQuery plugin). Hari ini saya ingin sobat untuk memberitahu bagaimana untuk mengulangi perilaku yang sama hanya dengan CSS3 (tanpa javascript). Saya harus menggunakan transisi CSS3 dalam menu ini untuk menghidupkan elemen tersebut.
Silahkan sobat lihat dulu DEMO nya disini !!! atau klik tombol di bawah ini...

DEMO Klik disini!!!

Gimana setelah sobat lihat Live Demo nya,..?? apakah sobat minat dengan Efek Lava Lamp tersebut?? Jika sobat minat langsung ajah sobat ambil script dibawah ini kemudian letakkan sesuai di template sobat masing²

CSS

Berikut adalah script CSS menu Lava Lamp nya.

CSS Layout

<script type="text/javascript">
/* Lettering.JS 0.6.1 by Dave Rupert  - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);

$(document).ready(function() {
$(".entry-title").lettering();
});
</script>

CSS Menu

.entry-title {
font-family: "Arial Narrow", Arial, Verdana, sans-serif;
margin: 10px 0 0 0; 
font: normal 75px/75px Arial Narrow;
font-weight: bold;
text-transform: uppercase;
color: #5e8b99;
}
.entry-title .char1 {
color: #000;
}
.entry-title .char2 { 
color: #AAA; 
}
.entry-title .char3 { 
color: #ea9;
}
.entry-title .char4 { 
color: #50d;
}
.entry-title .char5 { 
color: #090;
}

HTML

Berikut adalah kode html dari menu kami seperti biasa ini lagi tag UL-LI adalah menu navigasi berbasis.
Hal yang paling menarik akan gaya CSS tentu saja,...

<div class="container">

            <ul id="nav">
                <li><a href="http://irvan-efendy.blogspot.com">Home</a></li>
                <li><a class="hsubs" href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="http://irvan-efendy.blogspot.com">Back</a></li>
                <div id="lavalamp"></div>
            </ul>

        </div>