Tech is political: The people under attack in Palestine 🇵🇸, Iran 🇮🇷, and Lebanon 🇱🇧 are people like us. They’re our brothers and sisters, too. Read up on their history, scrutinize what you’re told, and demand that they be respected. Hide

Frontend Dogma

“animations” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: effects, css, javascript · Subtopics: gsap, transitions (non-exhaustive) · “animations” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
In-n-Out Animation Using “sibling-index()” (css/fro)328
css, functions
How to Create Awesome Staggered Animations in CSS (log)327
how-tos, css
Get Ready for the Powerful CSS “border-shape” Property (css/css)326
css, borders, shapes, examples
Boundary-Aware Styling in CSS (pre/fro)325
css, functions, examples
Principles in Motion (cha+/fig)324
design
Animating the “dialog” Element Using View Transitions (rik)323
modals, html, view-transitions, javascript, css
Creating Memorable Web Experiences: A Modern CSS Toolkit (hol/css)322
css, svg, user-experience
Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions (geo/css)321
css, scrolling, view-transitions, container-queries
Scrubbable Staggered Animation With CSS “@function” (fro)320
css, math
WWDC26: Get Started With the HTML “model” Element319
videos, introductions, html
CSS Can Now Animate Between Pages: View Transitions Without JavaScript318
css, view-transitions
In-n-Out Animations: Dialogs (chr/fro)317
modals, css
Revealing Text With CSS “letter-spacing” (pre/css)316
css, transitions, effects
CSS vs. JavaScript (jos)315
css, javascript, comparisons
What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More (dxn/css)314
css, retrospectives, polypane, focus, view-transitions, web-platform
How to Control Infinite CSS Animations (css/fro)313
how-tos, css
Animating Focus With View Transitions (chr/fro)312
css, view-transitions, focus
Control the Speed of Infinite Animations (css)311
css
Scroll-Driven Animations (jos)310
css, scrolling
Creating Custom Page Transitions in Astro With Barba.js and GSAP (cod)309
astro, gsap, tooling, javascript
On “clip-path” Animations308
css, clipping
The Great CSS Expansion (pav/git)307
css, anchor-positioning, pop-overs, modals, transitions, forms
Using CSS Animations as State Machines to Remember Focus and Hover States With CSS Only (pat)306
css, focus, hover, techniques
Virtual Scroll-Driven 3D Scenes (fro)305
css, scrolling
How to Debug the “@starting-style” At-Rule in Polypane (pol)304
how-tos, debugging, css, polypane, browsers
Anchor Interpolated Morph (AIM) (arg)303
css, techniques
Animating Responsive Grid Layout Transitions With GSAP Flip (cod)302
css, grids, layout, gsap, plugins
Building a Scroll-Driven Dual-Wave Text Animation With GSAP (cod)301
gsap, scrolling
Smashing Animations: Theming Animations Using CSS Relative Colour (mal/sma)300
colors, theming, css
Beyond the Mouse: Animating With Mobile Accelerometers (ami/fro)299
mobile, javascript
Different Page Transitions for Different Circumstances (chr/fro)298
css, javascript, view-transitions
A Tale of Two Animations—the Compositor in the Skies (per)297
css, performance
Creating Scroll-Based Animations in Full view() (pre/css)296
css, scrolling, functions
Design Accessible Animation and Movement With Code Examples (pop)295
design, accessibility, css, javascript, examples
Animation and Carousels (web)294
accessibility, carousels, css, reduced-motion
Keyframes Tokens: Standardizing Animation Across Projects (ami/sma)293
css, consistency
Testing Methods: Animation From Interactions (dec)292
accessibility, wcag, testing
Animating CSS “width” or “height” No Longer Forces a Main Thread Animation (in Chrome, Under the Right Conditions) (bra)291
css, chrome, google, browsers
Testing Methods: Pause, Stop, Hide (dec)290
accessibility, wcag, testing, multimedia, link-lists
Smashing Animations: Magnificent SVGs With “<use>” and CSS Custom Properties (mal/sma)289
transforms, svg, css, custom-properties
Staggered Animation With CSS “sibling-*” Functions (pre/fro)288
css, functions
Combining Scroll-Driven Animations With “@starting-style” (bra)287
css, scrolling
The Web Animation Performance Tier List (cit)286
performance, javascript, css, apis
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)285
svg, images
Springs and Bounces in Native CSS (jos)284
css, transitions, effects, functions
CSS Animations That Leverage the Parent–Child Relationship (pre/css)283
css
Sequential “linear()” Animation With n Elements (css/css)282
css, functions
25 New and Rad Features of CSS (arg/cas)281
videos, css, transitions, cascade, selectors, functions, colors, scrolling
Top 11 CSS Tricks Every Web Developer Should Know280
css, custom-properties, layout, selectors, positioning, dark-mode, resets, tips-and-tricks
How to Animate WebGL Shaders With GSAP: Ripples, Reveals, and Dynamic Blur Effects (cod)279
how-tos, webgl, gsap, effects
Numbers That Fall (Scroll-Driven Animations and Sibling Index) (chr/fro)278
css, html, scrolling, effects
Smashing Animations: Building Adaptive SVGs With “<symbol>”, “<use>”, and CSS Media Queries (mal/sma)277
svg, css, javascript
7 Practical Animation Tips (emi)276
buttons, tooltips, css, tips-and-tricks
Create Sick Web Animations in Three.js With GSAP (ato)275
gsap, threejs
Ambient Animations in Web Design: Principles and Implementation (mal/sma)274
design, principles, css
What You Need to Know About Modern CSS (2025 Edition) (chr/fro)273
css, pop-overs, functions, forms, shapes, source-order, link-lists
CSS “offset“ and “animation-composition” for Rotating Menus (pre/fro)272
css, navigation
Replace Your Animated GIFs With SVGs (fro)271
gif, svg, images, css
Color Shifting in CSS (jos)270
css, colors, techniques
You Don’t Need Animations (emi)269
design
CSS Pulse Animation (mar)268
css, effects
Animated Sites Are Unique, but Not Always Accessible267
accessibility, multimedia, wcag, user-experience
Infinite Marquee Animation Using Modern CSS (css/fro)266
css, effects
Nobody Waits for Your Fancy Animations Anymore (and They Never Really Did) (web)265
parallax, effects, performance, user-experience, design
Frontend News #15: Transform Order Matters, Creative Drop Caps, Frontend Developer Quiz (zor/css)264
videos, css, transforms, apis, debugging, buttons
Public CSS Custom Properties in the Shadow DOM (mic)263
css, custom-properties, shadow-dom, dom
Stacked Transforms (chr/fro)262
css, transforms
A11y 101: 2.2.2 Pause, Stop, Hide (nat)261
accessibility, wcag, multimedia, reduced-motion
Scroll-Driven Sticky Heading (ami/css)260
headings, css, positioning, scrolling, effects
View Transition List Reordering (With a Kick Flip) (chr/fro)259
css, view-transitions, effects
A Simple Website258
websites, history, layout, images, tables, javascript, ajax, flash, deploying, simplicity
Custom Select (That Comes Up From the Bottom on Mobile) (chr/fro)257
html, forms, css, progressive-enhancement, mobile
A Guide to Scroll-Driven Animations With Just CSS (sar/web)256
guides, css, scrolling
Animating Zooming Using CSS: Transform Order Is Important… Sometimes (jaf)255
css, zooming, transforms
Web Animations Today and Tomorrow (bra)254
videos, view-transitions, scrolling, css, web-platform
Scroll-Driven Animations Inside a CSS Carousel (geo/css)253
css, scrolling, carousels
Potential Accessibility Issues of Floating Animations on Webpages and Mobile Apps (cer)252
accessibility
Good vs. Great Animations (emi)251
css, transforms, transitions, radix
Cover Flow With Modern CSS: Scroll-Driven Animations in Action (add)250
css, transforms, scrolling, effects, history
Introducing Motion for Vue (cit)249
introductions, tooling, vuejs
View Transitions Applied: Smoothly Animating a “border-radius” With a View Transition (bra)248
css, view-transitions, borders
Creating Animated Accordions With the “details” Element and Modern CSS (ste/bui)247
html, css, disclosure-widgets, accordions, transitions
Typecasting and Viewport Transitions in CSS With “tan(atan2())” (mon/css)246
css, transitions, functions, math
Transitioning Top-Layer Entries and the Display Property in CSS (uti/sma)245
css, transitions, techniques, effects
6 CSS Snippets Every Front-End Developer Should Know in 2025 (arg)244
css, functions, custom-properties, transitions, gradients, effects
Revealed: React’s Experimental Animations API (cit)243
react, transitions, apis
Running Animations Without Keyframes (css)242
css, tips-and-tricks
Nothing Moves241
design
Scroll-Driven and Fixed (chr/fro)240
css, scrolling, positioning
Stylish Holidays! Creating a Scroll-Driven Christmas Tree in CSS (uti)239
css, svg, scrolling, effects
Animating Entry Effects (ty/5t3)238
css, transitions, effects
“calc-size()” and Interpolate Size (kev/5t3)237
css, functions
An Introduction to CSS Scroll-Driven Animations: Scroll and View Progress Timelines (sma)236
introductions, css, scrolling
Spot Non-Composited Animations in Chrome DevTools (bra)235
css, dev-tools, browsers, chrome, google
Custom Progress Element Using Anchor Positioning and Scroll-Driven Animations (css/fro)234
css, anchor-positioning, scrolling, progress-indicators
(Up-)Scoped Scroll Timelines (chr/fro)233
css, scrolling
Named Scroll and View Timelines (chr/fro)232
css
Scroll-Driven… Sections (chr/fro)231
css, scrolling
Floating in Space—Animations With Compose and Canvas (eev)230
canvas, javascript
Solved by CSS Scroll-Driven Animations: Hide a Header When Scrolling Down, Show It Again When Scrolling Up (bra)229
hiding, css, scrolling, techniques
Building a Dynamic Background Effect228
react, css, backgrounds, effects
Feature Detecting Scroll-Driven Animations With “@supports”: You Want to Check for “animation-range” Too (bra)227
css, feature-detection, support, firefox, mozilla, browsers
Animate to “height: auto;” (and Other Intrinsic Sizing Keywords) in CSS (bra)226
css
Making Orbit Animations With CSS Custom Properties (lon)225
css, custom-properties, effects
The Dialog Element With Entry and Exit Animations (chr/fro)224
modals, css
The Two Lines of CSS That Tanked Performance (120 FPS to 40 FPS) (and)223
css, performance
Custom Range Slider Using Anchor Positioning and Scroll-Driven Animations (css/fro)222
sliders, css, anchor-positioning, scrolling, forms
12 Best JavaScript Animation Libraries to Supercharge Your Web Projects in 2024221
javascript, libraries, link-lists
Now in Baseline: Animating Entry Effects (una)220
browsers, support, web-platform, css
20 Super Useful CSS Animation Libraries219
css, libraries, link-lists
One of the Boss Battles of CSS Is Almost Won! Transitioning to “auto” (chr/fro)218
css, functions, transitions
Stunning Staggered CSS Animation/Transition on Page Load (zor/css)217
videos, css, transitions
Refactoring a Scroll-Driven Animation From JavaScript to CSS (and)216
refactoring, scrolling, javascript, css
Single CSS Keyframe Tricks Are Magic (arg)215
videos, css, tips-and-tricks
New Magic for Animations in CSS (chs)214
css
Animating the Dialog Element (fro)213
css, modals
Popover Element Entry and Exit Animations in a Few Lines of CSS (paw)212
pop-overs, css
Morphing Arbitrary Paths in SVG211
svg
The Times You Need a Custom “@property” Instead of a CSS Variable (pre/sma)210
css, custom-properties, transitions
If View Transitions and Scroll-Driven Animations Had a Baby… (bra/9el)209
videos, css, view-transitions
Quick Tip: How to Animate Text Gradients and Patterns in CSS (ral)208
tips-and-tricks, how-tos, gradients, css
Infinite-Scrolling Logos in Flat HTML and Pure CSS (cit/sma)207
branding, scrolling, techniques, css
Animating Clip Paths on Scroll With “@property” in CSS (uti)206
css, scrolling, clipping, masking
Incredible JavaScript Animation Libraries205
javascript, libraries, link-lists
My New Favorite CSS Trick: “will-change”204
css, transitions, tips-and-tricks
My Favourite Animation Trick: Exponential Smoothing (lis)203
tips-and-tricks
Control Lazy Load, Infinite Scroll, and Animations in React202
react, lazy-loading, scrolling, javascript
Scroll-Driven Animations: You Want “overflow: clip”, not “overflow: hidden” (bra)201
css, overflow, scrolling
What Is CSS Motion Path?200
css, svg
A Practical Introduction to Scroll-Driven Animations With CSS “scroll()” and “view()” (arg/cod)199
introductions, scrolling, css, functions
The View Transitions API and Delightful UI Animations II (cod/sma)198
css, view-transitions, apis
The View Transitions API and Delightful UI Animations (cod/sma)197
css, view-transitions, apis
Scroll-Driven Animations (mic/5t3)196
scrolling, css
Cool Wiggly Hover Animation With CSS (ami)195
css, effects, hover
CSS “animation-composition” (tyl/5t3)194
css
Christmas Tree Animations Made With CSS and JS193
css, javascript, effects, link-lists
Create Dynamic Web Experiences With Interactive SVG Animations192
svg, images, tooling
Creating a Marquee Effect With CSS Animations191
css, effects
Measuring Long Animation Frames (LoAFs) in the Browser (mat/deb)190
performance, apis, web-vitals
Creating Accessible UI Animations (sma)189
accessibility
View Transitions and Stacking Context: Why Does My CSS View Transition Ignore “z-index”? (nic)188
css, positioning, view-transitions
Solved by CSS Scroll-Driven Animations: Style an Element Based on the Active Scroll Direction and Scroll Speed (bra)187
css, scrolling
How to Animate Along a Path in CSS (pre/sma)186
how-tos, css
Transition Animations: A Practical Guide185
guides, transitions, interaction-design
CSS-Only Scroll-Driven Animation and Other Impossible Things (bra+)184
videos, css
The Path to Awesome CSS Easing With the “linear()” Function (jhe/sma)183
css, functions
Solved by CSS Scroll-Driven Animations: Detect if an Element Can Scroll or Not (bra)182
css, scrolling
Revealing Images With CSS Mask Animations (css/sma)181
css, techniques
Connected Grid Layout Animation (cod)180
css, grids, layout
CSS Loaders (css)179
websites, css, effects
Realistic CSS Animations and the “linear()” Timing Function178
css, functions, time
Bézier Curves177
Four New CSS Features for Smooth Entry and Exit Animations (una)176
css, browsers, google, chrome, support
Testing Your Animation Refresh Rate With CSS Crimes?175
discussions, css
Creating Custom Easing Effects in CSS Animations Using the “linear()” Function (mic/mdn)174
css, functions
Resume and Pause Animations in CSS (ami)173
css
Accessible Animated GIF Alternatives (tyl/clo)172
accessibility, gif, multimedia, comparisons
Scroll Progress Animations in CSS (mic/mdn)171
css, scrolling, progress-indicators
A Case Study on Scroll-Driven Animations Performance170
scrolling, performance, css, javascript
Creating SVG Animations Using Tailwind CSS169
svg, images, tailwind
The Trick to Smoothly Animating Shadows in CSS (kev)168
videos, css, shadows
Position-Driven Styles (kiz)167
css
Faking a “:snapped” Selector With Scroll-Driven Animations (bra)166
css, selectors, scrolling
Creating Scroll-Triggered Animations by Combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions (bra)165
css, transitions, scrolling, custom-properties, style-queries
How to Add a CSS Reveal Animation to Your Images (css)164
how-tos, css, images
Best Animation Libraries for React163
libraries, react, link-lists
Liven Up Your Websites With Scroll-Driven Animations and View Transitions (bra/css)162
videos, css, scrolling, view-transitions
Using “linear()” for Better Animation (oll)161
css, javascript
What’s New in Web Animations (bra)160
videos
Scroll-Driven Animations (bra)159
websites, scrolling
Creating an Animated Gradient Border With CSS158
css, gradients, borders
Animating the Impossible (btc)157
videos, transitions
Spinning Diagrams With CSS (har)156
css
Introduction to Web Animations With GSAP155
introductions, javascript, gsap
Ping Animation With Minimal CSS (ami)154
css
10 CSS Animation Tips and Tricks (kev)153
videos, css, tips-and-tricks
Designing for Reduced Motion152
accessibility, reduced-motion, css, media-queries, javascript
Animated Gradient Text in CSS (ami)151
css, gradients
Ten Tips for Better CSS Transitions and Animations (col)150
css, transitions, tips-and-tricks
CSS Animation Libraries: 10 Popular Choices (sta)149
css, libraries, link-lists
Understanding Easing and Cubic Bézier Curves in CSS (col)148
css, transitions
Building an Animated SVG Logo With animejs147
svg, images, logos, vuejs
Table of Contents Progress Animation (kev)146
html, css, javascript, progress-indicators
Rotating Gallery With CSS Scroll-Driven Animations (jhe)145
html, css, javascript, scrolling
The Gotcha With Animating Custom Properties (bra)144
css, custom-properties, performance
Easy SVG Customization and Animation: A Practical Guide (cod/sma)143
guides, images, svg
On-Scroll Typography Animations (cod)142
typography
CSS Infinite 3D Sliders (css/css)141
css, sliders, effects
So, You’d Like to Animate the “display” Property (geo)140
css
CSS Infinite and Circular Rotating Image Slider (css/css)139
sliders, css, images
How to Create Advanced Animations With CSS (sma)138
how-tos, css
Animated Border Gradient (shs)137
code-pens, css, gradients, effects
CSS Animated Grid Layouts (bra)136
css, grids, layout
Responsive Animations for Every Screen Size and Device (css)135
css, responsive-design
How to Animate CSS Box Shadows and Optimize Performance134
how-tos, css, shadows, performance
Delightful UI Animations With Shared Element Transitions API II (cod/sma)133
javascript, transitions, apis
Delightful UI Animations With Shared Element Transitions API (cod/sma)132
javascript, transitions, apis
Inspect and Modify CSS Animation Effects (pat+)131
browsers, microsoft, edge, dev-tools, css, debugging
Hacking CSS Animation State and Playback Time (css)130
css
How Is This Possible With CSS Only?! (kev)129
videos, css, custom-properties, selectors
The Infinite Marquee128
html, css, effects
CSS Border Animations (bra)127
css, borders
Quick Tip: Negative Animation Delay (mic)126
css, tips-and-tricks
Vector Animations With Figma and SVG Animate125
figma, svg, images
My War on Animation (ver)124
accessibility
How to Animate SVG Shapes on Scroll (cod)123
how-tos, css, svg
How to Create Animated Anchor Links Using CSS (zor/css)122
videos, how-tos, links, css
CSS Quick Tip: Animating in a Newly Added Element (5t3)121
css, tips-and-tricks
CSS Animations Tutorial: Complete Guide for Beginners120
tutorials, guides, css
Foundations: Animations and Flashing Content (pat/tet)119
accessibility, fundamentals
Responsive Image Gallery With Animated Captions (5t3)118
images, css, responsive-design, examples
Empathetic Animation (css)117
user-experience
CSS Animation (5t3)116
css
Smoothly Reverting CSS Animations115
css
Animation Techniques for Adding and Removing Items From a Stack (css)114
css, javascript
Simple Blinking Cursor Animation Using CSS (ami)113
css, effects, cursors
Introduction to GSAP112
introductions, gsap, examples
How I Learnt to Stop Worrying and Love Animating the Box Model111
css, box-model
Exploring the CSS Paint API: Blob Animation (css/css)110
css, apis
Getting Started With CSS Animations109
css, introductions
Adding 100 Underline/Overlay Animations: The Impressive CSS Collection (css)108
css
Practical Use Cases for Scroll-Linked Animations in CSS With Scroll Timelines (bra/css)107
css
“prefers-reduced-motion”: Taking a No-Motion-First Approach to Animations106
css, accessibility
How to Create High-Performance CSS Animations (rac)105
how-tos, css, performance
Accessible Web Animation: The WCAG on Animation Explained (vlh/css)104
accessibility, reduced-motion, wcag
Animating React Components With GreenSock (sma)103
react, gsap, javascript, components
How CSS Perspective Works (ami/css)102
css, transforms
Ground Rules for Web Animations (css)101
transitions, css
Pausing a GIF With “details”/“summary” (chr/css)100
html, disclosure-widgets, gif, images
Hide Scrollbars During an Animation (chr/css)99
css, transitions, scrolling
An Overview of Scroll Technologies (zac/css)98
overviews, scrolling, css, javascript, tooling
Easing Animations in Canvas (css)97
canvas, javascript
How to Create a Particle Trail Animation in JavaScript (sma)96
how-tos, javascript
Web Animations in Safari 13.1 (web)95
browsers, apple, safari, webkit, css
4 Ways to Animate the Color of a Text Link on Hover (kat/css)94
links, colors, css, hover
How to Style and Animate the Letters in a String Using CSS (fos)93
how-tos, html, css
Interactivity and Animation With Variable Fonts (man/24w)92
variable-fonts, fonts, javascript, css
The Making of an Animated Favicon (pre/css)91
favicons, images, canvas
CSS Animation Libraries (chr/css)90
css, libraries, link-lists
SVG Circle Decomposition to Paths (sma)89
svg, images
Including Animation in Your Design System (vlh/sma)88
design-systems, effects
How to Get Started With CSS Animation (web)87
how-tos, css
7 Performance Tips for Jank-Free JavaScript Animations86
performance, javascript, tips-and-tricks
The State of Changing Gradients With CSS Transitions and Animations (ana/css)85
css, gradients, transitions
Page Transitions for Everyone (css)84
design, user-experience, transitions, performance, caching
Inspecting Animations in DevTools (fon/css)83
css, dev-tools, browsers, chrome, google, firefox, mozilla
Native-Like Animations for Page Transitions on the Web (sar/css)82
design, transitions, vuejs, nuxt, css
Designing for Accessibility and Inclusion (sma)81
design, accessibility, dei, colors, typography, images, multimedia, keyboard-navigation, layout, readability
Why Would You Do That in CSS? (chr/css)80
css
What Houdini Means for Animating Transforms (ana/css)79
css, houdini, transforms
Animating Bootstrap Carousels With GSAP’s Animation Library78
bootstrap, carousels, gsap
Making CSS Animations Feel More Natural (bra/css)77
css, transforms, transitions
Animating Border (css)76
css, borders, transitions, gradients, shadows
Animating Layouts With the FLIP Technique (dav/css)75
techniques, javascript, libraries
Optimizing CSS: Tweaking Animation Performance With DevTools74
css, performance, optimization, dev-tools, browsers, firefox, mozilla
Creating Vue.js Transitions and Animations (css)73
vuejs, transitions
Writing Smarter Animation Code (css)72
javascript, gsap
Integrating Animation Into a Design System (ali)71
design-systems, documentation
How to Use CSS Custom Properties With Transitions, Transforms, and Animations70
how-tos, css, custom-properties, transitions, transforms
Animating Single Div Art (css)69
html, css, art
Making Animations Wait (css)68
css, events, javascript
Using CSS Transitions on Auto Dimensions (css)67
css, transitions, transforms
Random Numbers in CSS (fon/css)66
css, randomness
How Functional Animation Helps Improve User Experience (sma)65
design, user-experience
Scaling Responsive Animations (zac/css)64
css, scaling, responsive-design
Best Practices for Animated Progress Indicators (sma)63
progress-indicators, best-practices, usability
The Movement Towards Motion in Website Backgrounds62
backgrounds, design
Upgrading CSS Animation With Motion Curves (sma)61
css, transitions, techniques
Communicating Animation (ali)60
communication, design, interaction-design
The State of CSS Reflections (ana/css)59
css, sass, transforms
Introducing the CSS “Clip-Path” Property58
introductions, css, clipping
Designing Meaningful Animation (vlh/btc)57
videos, design, css
A Comparison of Animation Technologies (sar/css)56
comparisons, css, canvas, smil, webgl, gsap, jquery, threejs, react
7 Trends That Will Define Web Design in 201655
design, trends, ai, mobile-first, layout
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)54
guides, smil, svg, images
Using Multi-Step Animations and Transitions (geo/css)53
css, transitions, transforms, examples
The 10 Big Web Design Trends of 201552
design, layout, trends, minimalism, scrolling, flat-design, colors, backgrounds, typography
Reverse Text Color Based on Background Color Automatically in CSS (fon/css)51
css, colors, backgrounds, effects
Creating Cel Animations With SVG (hey/sma)50
svg, images, css, sass
Animating the User Experience (btc)49
videos, user-experience, css
Debugging CSS Keyframe Animations (sar/css)48
css, transforms, debugging
Animations: The Angular Way (css)47
angularjs, transitions, css
12 Little-Known CSS Facts (the Sequel) (lou)46
css, borders, typography, tables, naming, selectors
Practical Techniques on Designing Animation (sar/sma)45
design, techniques
FLIP Your Animations (aer)44
techniques, javascript
Animation and UX Resources (vlh)43
css, javascript, link-lists
SVG Animation and CSS Transforms: A Complicated Love Story (css)42
svg, css, transforms
Styling and Animating SVGs With CSS (sar/sma)41
svg, images, css
A Guide to SVG Animations (SMIL) (sar/css)40
guides, svg, images, smil
Starting CSS Animations Mid-Way (chr/css)39
css
Adding CSS Animations to AngularJS Applications38
css, angularjs
Understanding the CSS3 “transition-timing-function” Property (sma)37
css, time, transitions
Dive In: Resources for Web Animation (ali)36
css, link-lists
Web Animation at Work (ali)35
css, design
Myth Busting: CSS Animations vs. JavaScript (css)34
css, javascript, comparisons, myths, metrics, gsap
Animating Vectors With SVG (bri/24w)33
svg, images, javascript
How to Create Cool Animations With AngularJS 1.2 and Animate.css32
how-tos, angularjs, libraries
Animation of How CSS Triangles Work (chr/css)31
css, techniques
Controlling CSS Animations and Transitions With JavaScript (zac/css)30
css, transitions, javascript, examples
CSS3 Animation Cheat Sheet29
css, cheat-sheets
Pseudo Element Animations/Transitions Bug Fixed in WebKit (chr/css)28
webkit, browser-engines, browsers, css, selectors, transitions, bugs
A Tale of Animation Performance (chr/css)27
css, performance
Why Moving Elements With “translate()” Is Better Than “pos:abs top/left” (pau)26
css, performance
CSS Animations With Only One Keyframe (lea)25
css
The Facebook Loading Animation in CSS (css)24
css, backgrounds, facebook+meta
A Pure CSS3 Cycling Slideshow (sma)23
css, effects
Modernize Your HTML5 Canvas Game22
canvas, apis, html, javascript, css
Transitions and Animations on CSS Generated Content (chr/css)21
css, generated-content, transitions, browsers, support
The Guide to CSS Animation: Principles and Examples (sma)20
guides, css, principles, examples
Why Can’t We Trigger CSS3 Animations Using “:hover” and “:focus”? (mat)19
css, selectors
An Introduction to CSS Keyframes Animation (lou/sma)18
introductions, css
Animating With jQuery17
jquery
CSS Progress Bars (chr/css)16
css, progress-indicators
Different Transitions for Hover On / Hover Off (chr/css)15
css, transitions, effects, hover
What You Need to Know About Behavioral CSS (sma)14
css, transforms
GX—Full-Featured JavaScript Animations Framework13
libraries, javascript
CSS Gradients, Transforms, Animations, and Masks (sen)12
css, gradients, transforms, transitions, masking
The Performance Aspect of Acid311
acid-tests, web-platform, browsers, performance
Animation With Continuations (dal/aja)10
javascript
Run: Universal JavaScript Animation Framework (dal/aja)9
javascript, libraries
Introduction to ActionScript Animation in Flash8
introductions, actionscript, flash
SVG: Modularized and Mobile7
svg, images, html
Dynamic HTML Should Ease Web Animation, Interactivity (zdn)6
html, dhtml
CSS Animated Gradient Generator5
tools, exploration, code-generation, css, backgrounds, gradients
CSS Animation Generator4
tools, exploration, code-generation, css
CSS Spring Easing Generator3
tools, exploration, code-generation, css, transitions
CSS Linear Easing Generator (jaf)2
tools, exploration, code-generation, css, transitions
CSS Easing Generator (mat)1
tools, exploration, code-generation, css, transitions