Collection of free HTML and CSS animation code examples. Using animations, its gives an amazing look to your website that will give an engaging experience to the user. In CSS3, there are many cool effects and more natural colors as built-in features. There are so many effects in the CSS3 library.

#Hand written SVG text animation See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen. Author: Matthew Ellis Links: Demo and Code Made with: HTML / CSS (SCSS) / JS(Babel) 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. Author: Mikael Ainalem Links: Demo and Code Made with: HTML / CSS / JS 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. Author: Pouya Saadeghi Links: Demo and Code Made with: HTML / CSS (SCSS) 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. Author: Donovan Hutchinson Links: Demo and Code Made with: HTML / CSS (SCSS) / JS 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. Author: Yoann Links: Demo and Code Made with: HTML / CSS (SCSS)

#Sticker See the Pen Sticker by ycw (@ycw) on CodePen. Author: ycw Links: Demo and Code Made with: HTML (Pug) / CSS (Less)

#ROCK HAND ANIMATION See the Pen ROCK ? by Vangel Tzo (@srekoble) on CodePen. Author: Vangel Tzo Links: Demo and Code Made with: HTML / CSS (SCSS)

#SOLAR ECLIPSE ANIMATION See the Pen solar eclipse by Aris Acoba (@aris_acoba) on CodePen. Author: Aris Acoba Links: Demo and Code Made with: HTML (Pug) / CSS (SCSS)