css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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

Comments

  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.
Loading...
Loading...