Tips & Tricks & Links

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

If the animations seem slow or you experience a blinking effect on the whole page, force hardware acceleration: Example: .animated_element { transform: translate3d(0, 0, 0); }

A newer (and more “by-the-book”) way of solving this problem is using the will-change: transform declaration — see dev.opera.com/articles/css-will-change-property/.

The Running Cat by Rachel Nabors, is an awesome animation proving that fleshless animations are our future (although it will take some time). See cdpn.io/e/rCost + 24ways.org/2012/flashless-animation/.

If you want to set the trajectory of an animated object, take a look at the Stylie tool: jeremyckahn.github.io/stylie/.

The Ceaser tool will let you define your own animation timing function. See matthewlein.com/ceaser/.

Advanced CSS3 animation tutorial. See netmagazine.com/tutorials/masterclass-css-animations.


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more