Friday, June 24, 2011

Few words about my CSS Nyan Cat

Last week Mozilla together with Finnish demoscene hackers organized Flame Party in capital of Finland, Helsinki. More than 100 participants worked whole day on outstanding web demos in two main categories - Single Effect and Main Demo.
Because of nearly release of stable Firefox 5, first Mozilla's browser with CSS3 Animation support, I decide to create CSS3 demo for the Single Effect Compo.
Since I really enjoy all that 4chan-like mems stuff, I chose Nyan Cat, as one of the most 'fresh' ones. In case you don't know it (check the progress bar!):


I didn't use any graphics to code my CSS Nyan Cat. It is completely drawn and animated in CSS. The 'pop-tart' body is created with two rounded cornered divs and big, pink dots separated with non-breaking spaces:
#toastBody {
    background-color:#fad695;
    width:100px;
    height: 70px;
    border: solid #000 5px;
    border-radius: 15px;
    padding: 2px;
    position:absolute;
    z-index:19;
}

#toastBody > div {
    width:100px;
    height:70px;
    border-radius: 30px;
    background-color: #fc9dff;
    display:block;
    color: #da3eb9;
    font-size: 40px;
    line-height: 10px;
}
All the animations was declared with @-moz/webkit-keyframe (I wrote a lot about this method before).

I made couple of unusual things during development. For example, look on the cat's mouth:


Yup, it is rotated 'E' letter:
<div id="mainHead" class="skin">
    <div class="mouth">E</div>
</div>

.mouth {
    position: absolute;
    -moz-transform: scale(2, 0.7) rotate(-90deg);
    -webkit-transform: scale(2, 0.7) rotate(-90deg);
    font-family: Arial;
    font-size: 25px;
    font-weight: bold;
    top:9px;
    left:37px;
    color: #000;
}

What about the rainbow behind the cat? I just cropped part of original image, put it into CSS Gradient Editor by ColorZilla (awesome tool BTW, but still without couple of necessary features I use daily; I think I will create something like this on my own), which generates me css gradient ready for pasting into the div background:
.rainbow {
 position:absolute;
 width:45px;
 height:90px; 
 background: -moz-linear-gradient (top, #d91a12 15%, #e13300 15%, #ff7f14 16%, #f2ab03 32%, #ebc000 32%, #fade00 33%, #efff03 48%, #56fc02 49%, #52ff01 66%, #4ade7e 67%, #3baaf2 67%, #3baaf2 84%, #7337f7 84%, #6b40f2 100%);
}
The most annoying thing was the star. Animated stars in the background are made up from 8 animated elements. I google "nyan cat sprite" and found all the star frames [like this]. The only way to animate it was pixel-perfect animation of each of 8 divs. It took me really lot of time:
@-moz-keyframes star1 {
 0% { top: 0; height: 5px;}
 33.19% { top: 0; height: 5px; }
 33.2% { height:10px; top:0; }
 49.79% { height:10px; top:0; }
 49.8% { height:10px; top:5px; }
 66.39% {height:10px; top:5px; }
 66.4% { height:5px; top:10px;}
 82.99% { height:5px; top:10px;}
 83% { height: 5px; top: 15px; }
 99.99% { height: 5px; top: 15px; }
 100% { top: 0; height: 5px; }
}

@-moz-keyframes star2-3-6-7 {
 0% { visibility: hidden; }
 16.59% { visibility: hidden; }
 16.6% { visibility: visible; }
 33.19% { visibility: visible; }
 33.2% { visibility: hidden; }
 100% { visibility: hidden; }
}

@-moz-keyframes star4 {
 0% { left: 0; width: 5px; visibility: visible;}
 33.19% { left: 0; width: 5px; }
 33.2% { width:10px; left:0; }
 49.79% { width:10px; left:0; }
 49.8% { width:10px; left:5px; }
 66.39% {width:10px; left:5px; }
 66.4% { width:5px; left:10px;}
 82.99% { width:5px; left:10px;}
 83% { width: 5px; left: 15px; visibility:hidden;}
 99.99% { width: 5px; left: 15px; visibility:hidden;}
 100% { left: 0; width: 5px; visibility:hidden;}
}

@-moz-keyframes star5 {
 0% { left: 38px; width: 5px; visibility: visible;}
 33.19% { left: 38px; width: 5px; }
 33.2% { width:10px; left:33px; }
 49.79% { width:10px; left:33px; }
 49.8% { width:10px; left:28px; }
 66.39% {width:10px; left:28px; }
 66.4% { width:5px; left:28px;}
 82.99% { width:5px; left:28px;}
 83% { width: 5px; left: 15px; visibility:hidden;}
 99.99% { width: 5px; left: 15px; visibility:hidden;}
 100% { left: 0; width: 5px; visibility:hidden;}
}

@-moz-keyframes star8 {
 0% { top: 32px; height: 5px; visibility:visible;}
 33.19% { top: 32px; height: 5px; }
 33.2% { height:10px; top:28px; }
 49.79% { height:10px; top:28px; }
 49.8% { height:10px; top:23px; }
 66.39% {height:10px; top:23px; }
 66.4% { height:5px; top:18px;}
 82.99% { height:5px; top:18px;}
 83% { height: 5px; top: 15px; visibility:hidden;}
 99.99% { height: 5px; top: 15px; visibility:hidden;}
 100% { top: 0; height: 5px; visibility:hidden;}
}

.star {
 position: absolute;
 width: 40px;
 height: 40px;
 z-index: 10;
}

.star div {
 width: 5px;
 height: 5px;
 background-color: #fff;
 position: absolute;
 -moz-animation: star1 0.4s linear 0s infinite;
 -webkit-animation: star1 0.4s linear 0s infinite;
}

Here is the final result of everything: CSS NYAN CAT, and Github repo. If you like it, don't forget to click "I like it" on Mozilla's page!

22 comments:

  1. Lol, rotated E mouth rox!

    ReplyDelete
  2. why rotated E instead of rotated 3?

    ReplyDelete
  3. Coz it looks like 'E' in the original one.

    ReplyDelete
  4. It's cute, but your audio loop needs work. It jumps rather noticeably -- or rather, it repeats the same fraction of a second, twice.

    ReplyDelete
  5. yes
    it is amazing because you describe every code in each line
    that is better for bigners for understanding.

    ReplyDelete
  6. Amazing, the up to date information has enhanced my knowledge allot. Keep posting such useful posts so that I can reap maximum benefits from them. Thank you Quit Smoking Tips.

    ReplyDelete
  7. this is very interested, i like to read css.
    Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia Thanks for the great piece of sharing. Enjoy to read JR Tutorial your write .

    ReplyDelete
  8. This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! Keep up the good work. Aplikasi Game Android Informasi laptop gaming

    ReplyDelete
  9. This is my first opportunity to visit this website. I found some interesting things and I will apply to the development of my blog. Thanks for sharing useful information.
    Baju muslim Wanita terbaru
    Kebaya atasan wanita
    kemeja wanita
    Baju batik pakaina wanita

    ReplyDelete
  10. I really like your site.and really enjoyed this post.Very helpful,, the style of this article I'm like, really pretty good.

    ReplyDelete
  11. I was about to say something on this topic. But now i can see that everything on this topic is very amazing and mind blowing, so i have nothing to say here. I am just going through all the topics and being appreciated. Thanks for sharing.

    ReplyDelete
  12. I prefer to study this kind of material. Nicely written information in this post, the quality of content is fine and the conclusion is lovely. Things are very open and intensely clear explanation of issues

    ReplyDelete
  13. Obat Kuat
    Thanks for the information , we will wait for the latest information on this blog , our greetings
    Obat Pembesar Penis | Ciri Vimax Asli

    ReplyDelete
  14. Forte School of Music is providing Music Lessons howick Auckland , New Zealand. Forte School is best in Music , Singing , Guitar and Piano Classes. Contact us now 09 534 2223

    ReplyDelete
  15. Thank you for sharing, it is very helpful information; I do find CSS is the best tool for web designer.

    ReplyDelete
  16. I know a huge number of services that services that offer writing essays and essays for a fee, but to be honest, each service had certain nuances, that is, there were problems that I did not want to pay for. After a while I found essaypro service, it was as if my luck smiled on me, because this particular site is the best way to provide essay writing services. The site is well designed and at the same time easy to manage, good employees who understand their business. And the fee for the services is, well, quite paltry.

    ReplyDelete
  17. Hi there! This article could not be written much better Reading through this article reminds me of my previous roommate! He continually kept preaching about this. I’ll forward this information to him. Feel free to visit my website; 카지노사이트

    ReplyDelete
  18. Thank you for the post. CSS Nyan Cat is an animated GIF created using Cascading Style Sheets (CSS) coding. It was created by graphic designer and web developer Tim Holman in April 2011. The GIF depicts a Nyan Cat—a character popularized by an online animated cartoon—flying through space and leaving a rainbow trail behind it. It became an Internet meme, and variations of it have been used in web designs and websites, including the official CSS Coding site. It has been used as a logo for many websites and services, and has appeared in books, magazines and television shows. 2D floor plans The meme has also been featured in flash games and even augmented reality apps.

    ReplyDelete
  19. Within the spectrum of academic support, the popularity of dissertation writing services cheap labeled as cheap is on the rise. As students strive to strike a balance between quality and affordability, these services present themselves as viable options. The attraction lies in the promise of cost-effective assistance that does not compromise the standards expected in the creation of well-researched and compelling dissertations.

    ReplyDelete
  20. Your optimism is like a gentle breeze, refreshing and uplifting to all who encounter it. Your mouse click speedis so fast, it's like you have the reflexes of a ninja!

    ReplyDelete