Top 10 Cool CSS & JS Animation

#Hand written SVG text animation

See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen.

Typographies have taken the modern design to the next level. Thanks to the realistic-looking fonts that help us express the message clearly to the user. In some parts, the static text will be more than enough, but animated texts will give an authentic feel to the users. Especially, the handwritten style fonts will get a life when you animate them. CSS animation examples like this will help you make your design perfect. If you are making any creative website or a personal website for a professional, CSS animation examples like this will help you create a strong about page.

# Modern retro - IBM THINK

See the Pen Modern retro - IBM THINK by Mikael Ainalem (@ainalem) on CodePen.

In this CSS animation example, the created has used the retro IBM think concept; golden days of IBM. You can use the concept to make your own logo animation or the loader animation. CSS animation examples like this can also be used on landing pages to make a strong impression. The animation is smooth and clean so the users will enjoy seeing this animation. The animation timing is done precisely so the user can clearly see the color transformation and the text formation from the dots. Code scripts used to make this entire design is shared with you on the CodePen editor. So you can easily edit and visualize the results before using the code on your project.

#SVG circular progress: CSS animated & Angle gradient

See the Pen SVG circular progress: CSS animated & Angle gradient by Pouya Saadeghi (@saadeghi) on CodePen.

Animated skill bars are something that you might need in several websites. Especially in the personal website template and online resume website template, these elements play a major role. Rather than simply denoting your experience and skillsets, elements like this will help spice up things. The creator of the template has given a circular progress bar in different line strokes. Gradient color schemes are used in the demo, based on your website theme color, you can customize the ring colors. As all the elements are designed purely using the latest HTML5 and CSS3 framework you have plenty of customization options.

#WWDC 2015 CSS

See the Pen WWDC 2015 CSS by Donovan Hutchinson (@donovanh) on CodePen.

WWDC 2015 CSS animation design is inspired from the Apple’s WWDC event. We all know that Apple designers give us a hint about the upcoming event through the posters. If you are an event organizer or event planner, using elements like this in your campaign will get a lot of attention. The developer of this CSS animation has kept it kept it simple and subtle so that it won’t take much of your time. Using light-weight elements like this on your website will not only make your website look pretty but also let the page load faster

# Text animation

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

#Sticker

See the Pen Sticker by ycw (@ycw) on CodePen.

#ROCK HAND ANIMATION

See the Pen ROCK ? by Vangel Tzo (@srekoble) on CodePen.

#Submarine Animation (Pure CSS)

See the Pen Submarine Animation (Pure CSS) by Akhil Sai Ram (@akhil_001) on CodePen.

#SOLAR ECLIPSE ANIMATION

See the Pen solar eclipse by Aris Acoba (@aris_acoba) on CodePen.

#CSS Box Dog

See the Pen CSS Box Dog by agathaco (@agathaco) on CodePen.