user profile image

This is the opening title card for the remake of the hugely popular science television show: COSMOS. Completely implemented in CSS3

Image Credit : Nasa


  1. Really Good work. LOVE IT !

  2. Thanks a lot @berdejitendra. Have been experimenting on and off with CSS animations, so it means a lot that you like it. :)

  3. @saransh . This was nice but what if I want to add some more characters? I am still a beginner in css3.

  4. @PranavGarg, If you have a look at the code, you'll notice that I have first positioned all elements according to where I want them to be without any animation.
    After which I define the styling for the various states of the animation using keyframes and trial/error. Since I had 6 elements, these were symmetrical in nature. So in order to add more characters, you could potentially add more letters, position them, and add more animation keyframes corresponding to their various positions. I've updated the code for more readability, have a look.

  5. thanks ! But as I told you @saransh that I am new to CSS3 animations I am not familiar with keyframes and all that. I tried it by changing the margin of span to -20px and added one more span. It worked :)

  6. Ahh, my bad. Glad it worked out though. :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.