Frank Dvorak Front-end web development, HTML, CSS, JavaScript, jQuery, React, WordPress

Welcome to my blog about CSS animations. In each tutorial I include specific group of CSS properties and show you how to use them in practice by creating the final effect. Every post consists of a simple step by step guide, working example of the final effect and in some cases a YouTube video tutorial.

Some of the CSS3 features I use here are new, experimental and not fully supported by some browsers. For the latest information on browser support, please visit caniuse.com. For the full visual experience I recommend not to use Internet Explorer or Microsoft Edge while visiting this website.



‘Surprise under the box’ 3D menu animation

Added at 9:14 pm on August 7, 2019

Working example inside, tutorial coming soon …

First letter & background creative button animation

Added at 2:56 pm on June 20, 2019

Quick and easy creative typography animation tutorial

Image hover effect – breaking into pieces

Added at 10:53 am on May 6, 2019

In this guide I’ll show you how to use background-size and background-position CSS properties to break image into pieces and put it back together

3D layered animation with CSS transforms

Added at 6:26 pm on April 27, 2019

There are many effects we can create with CSS transforms. In this guide I will show how to create illusion of 3D space with transform:translate()

Liquid effect in CSS with SVG filters

Added at 4:41 pm on March 1, 2019

Everything in the DOM is a square and developers go to great lengths to give their CSS animations round or assymetric features. SVG filters introduced in CSS3 give us so many new options, I will show you how to create so called ‘sticky/liquid’ effect in few easy steps.

Honeycomb navigation bar with CSS clip-path

Added at 11:11 am on February 26, 2019

This time I will show you how to use CSS3 clip-path property and .not() selector for animations

CSS animations on social media buttons

Added at 7:13 am on January 21, 2019

In this series I will show you how to create few of my favourite CSS button animations. Each guide will contain simple step by step process and I will highlight new less known CSS properties as we use them.