We are all busy and don't have time to read the latest treatise on some esoteric CSS topic. This page is for those of us who want awesome and to-the-point information about the things in CSS you need to know to start creating awesome front-end UIs.
CHAPTER 1
Not only will you learn what an animation is, you will also meet the friendly keyframe, transition, and JavaScript animation flavors.
readCHAPTER 2
Learn all about working with CSS animations by meeting the animation property, @keyframes rule, and more!
read watchCHAPTER 3
Learn all about how to use CSS transitions to make your everyday property changes come to life.
read watchCHAPTER 4
Know when to use animations or transitions by learning about the similarities and differences between them.
readCHAPTER 5
Make your animations and transitions look realistic by learning about and using the awesometastic things known as easing functions.
read watchCHAPTER 6
Learn how to use the translate3d transform to create animations that use a dash of hardware acceleration to run really smoothly.
readCHAPTER 7
Learn about the animationstart, animationiteration, and animationend events and how to use them in your applications.
readCHAPTER 8
Learn how to detect when a transition ends by taking advantage of the transitionend event.
readNow that you've learned the basics, the real fun can begin with our hands-on examples below!
css only
Learn how to create the classic Ken Burns effect where you slowly pan and zoom around on an image.
readcss only
Learn how to create a sliding image effect that plays when you hover over the image.
readcss only
Learn how to create a cool sliding background effect that plays on any link when you hover over it.
readcss only
Learn how to create a realistic CSS animation with an easing function where you fade and scale in some text.
readcss only
Learn how to use CSS animations for hover effects and why using them is sometimes an amusingly bad idea.
readcss only
Create smooth sprite sheet animations using nothing but a CSS animation and the mysterious steps easing function.
readcss only
Learn how to use a CSS Animation to re-create the blinking effect the blink tag so generously gifted to the world.
readcss only
In this deconstruction, learn how to create some awesome image links that contain a circular background that grows on hover.
readcss only
In this deconstrution, learn to re-create the iOS icon wobble or jiggle effect using just CSS Animations and a handful of clever tricks.
readcss + javascript
Learn how to create a content slider from scratch using a dash of the usual suspects (HTML, CSS, JavaScript) and a sweet CSS Transition.
readcss + javascript
Learn how to calculate the exact position of a click and have an element animate to that position.
readcss + javascript
In this deconstruction, learn how to use CSS transitions to continuosly move and animate many elements.
readcss + javascript
Learn how to use the transitionend event to make your transition loop forever.
readThought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!
:: Copyright KIRUPA 2026 //--