Effortless CSS Animation Transition ideas that you can do in 10 minutes

Today we take a step back from the featured templates of wordpress and magento and do something a little different. Css3 animations are rapidly taking over the web in the last years replacing the jQuery solutions that are so well embedded into our lives.

Today I will show you that you can have beautiful animated elements without the need of javascript. Don’t get me wrong I love javascript but sometimes it’s way better and faster to use a simple css3 solution.

Responsive css3 form animation

For a first stop, we look at a simple css3 responsive form I made with Foundation in 10 minutes. It works right out of the box and you can use it everywhere you like inside your project.

See the Pen Form animation css3 by Alex Grigore (@Bobyo) on CodePen.0

Let me know in the comments below if you would like a Sass version of this.

Icon love css3 animation

Next we have a pen by kuus in which we have a nice animated add love icon. A perfect solution that you can copy to a social button or a interaction graphic.

See the Pen Animated font icon button by Alex Grigore (@Bobyo) on CodePen.

To stay in the icon animation area, I’ve prepared a pen that works perfectly with every Font Awesome icon out there. With a little bit of Sass magic we are able to animate them very easily. Just hit “RERUN”.

See the Pen Simple font awesome animation with css3 by Alex Grigore (@Bobyo) on CodePen.

Social media

For the social media enthusiasts, I have found a css3 animation widget made by mariusbalaj that illustrates a css3 folding follow widget. It’s beautiful animation fits perfectly into any area that you would like to promote your social presence. It was made with css3 transitions, a google font and icons were provided by Font Awesome.

See the Pen Follow Widget with Folding CSS3 Animation by Marius Balaj (@mariusbalaj) on CodePen.

Animation coolness

For this last example, we picked a variation of an idea originally made by Mary Lou on codrops and then remade by Jupiter St John that illustrates a peephole style animation for a particular product or service you might implement. It’s slick animation will grab your attention and customizing it will not take you more than 10-15 minutes of work.

See the Pen css3 animations coolness by Jupiter St John (@jwebcat) on CodePen.

I hope you liked the collection of very slick animations and you will find a good use for some of them. Let me know in the comments below your variations for these snippets.