CSS Animation Weekly

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

4065 subscribers 124 issues

Subscribe to my list

This thingy has to be empti pwieshh

Previous issues

CSS Animation Weekly #124

#124 Dec 10, 2018

CSS Animation Weekly #123

#123 Dec 3, 2018

CSS Animation Weekly #122

#122 Nov 26, 2018

#121

Nov 19, 2018

CSS Animation Weekly #121 – It's here - the Black Friday special $10 sale you've been waiting for! Plus, let's read all about the
#120

Nov 12, 2018

CSS Animation Weekly #120 – Codevember is here and there is so much going on in web animation. Checkout how to create an amazing
#119

Nov 5, 2018

CSS Animation Weekly #119 – This week we're learning how to make slick animated grid previews, and taking in a world of inspiring
#118

Oct 29, 2018

CSS Animation Weekly #118 - 🎃 Halloween special 👻 – So much spooky CSS animation for you this week! We begin with a look back at some funky CSS animated
#117

Oct 22, 2018

CSS Animation Weekly #117 – We bring you micro nudges, animation worklets and a load of really great animated CSS inspiration tod
#116

Oct 15, 2018

CSS Animation Weekly #116 – Another spooky week as we build up toward Halloween!♥️Donovan at CSSAnimation.rocks
#115

Oct 8, 2018

CSS Animation Weekly - Issue #115 – This week we're starting to get spooky with the Halloween themed inspiration! Also, take a moment to
#114

Oct 1, 2018

CSS Animation Weekly #114 – This week we're having fun with complex SVG animations to create beautiful explainer graphics, explor
#113

Sep 24, 2018

CSS Animation Weekly #113 – This week we're delving into the ultimate guide to proper use of animation, and discovering loads of
#112

Sep 17, 2018

CSS Animation Weekly #112 – This week we're learning what CSS animation really is with an amazing new tutorial from Tiffany Brown
#111

Sep 10, 2018

CSS Animation Weekly #111 - Create pure CSS illustrations, 3D inspiration – This week we're getting into some advanced pure-CSS illustration and animation, as well as taking in
#110

Sep 3, 2018

CSS Animation Weekly #110 - Neon light effects, character study, magic tricks and more – Loads of fun stuff going on in CSS animation this week! Enjoy!♥️Donovan at CSSAnimation.rocks
#109

Aug 27, 2018

CSS Animation Weekly #109 - 🎂 Clip path and loads of inspiration – Happy birthday to me today! To celebrate, we have a load of great pure-CSS animated web demos. Enjoy!
#108

Aug 20, 2018

CSS Animation Weekly #108 - Zeotropes, rotating hearts, scared yeti and more
#107

Aug 13, 2018

CSS Animation Weekly #107 - CSS Scroll Snap, React-spring masonry and more – This week we're getting better at controlling our scrolling animations, and building animated masonry
#106

Aug 6, 2018

CSS Animation Weekly #106 - Grid UI, Bearded Nanny and more – It's a massive week of inspiration! Check out some truly amazing pure CSS artwork, GSAP animations, l
#105

Jul 30, 2018

CSS Animation Weekly #105 - Radial progress bars in Vue, Stacking with CSS animation and more – Last week we were making animated menus with React, this week we're looking at how to create animated
#104

Jul 23, 2018

CSS Animation Weekly #104 - React Animation, Stripe dropdown menu – I hope everyone's having a great week! This issue we look at how we can build complex animations into
#103

Jul 16, 2018

CSS Animation Weekly #103 - CSS vs JavaScript, Practical Techniques and inspiration – This week we're considering the age-old question, CSS or JavaScript? We think about how we design our
#102

Jul 9, 2018

CSS Animation Weekly #102 – This week we're learning how to make some amazing canvas-based parallax animations, and discovering a
#101

Jul 2, 2018

CSS Animation Weekly #101 - Menu special 🍔 – It's summer (here in the northern hemisphere) and we're celebrating 101 issues of CSS animation! What
#100

Jun 25, 2018

CSS Animation Weekly #100 – Welcome to issue #100! I can't believe it's been nearly two years. Let's celebrate by checking out so
#99

Jun 18, 2018

CSS Animation Weekly #99 – It's World Cup madness! To celebrate, we're... only featuring one soccer-related link 😅 Enjoy these s
#98

Jun 11, 2018

CSS Animation Weekly #98 - Avengers ID Card, swup and loads of inspiration – Good Monday to you! Hope you had a great weekend. Let's start the week with some awesome animation tu
#97

Jun 4, 2018

CSS Animation Weekly #97 - Sculpting animation, the state of gradient animation and more – This week we're sculpting our animations, learning how to use modern CSS approaches to animate gradie
#96

May 28, 2018

CSS Animation Weekly #96 - Loading spinners, keyframes and more – Another week of amazing CSS animation articles and inspiration. This week we're learning about access
#95

May 21, 2018

CSS Animation Weekly #95 - 👓 3D special! 👓 – This week is a 3D special! Check out all sorts of cool examples of 3D CSS animation. As a bonus, we'r
#94

May 14, 2018

CSS Animation Weekly #94 - 3D transforms, curved animations, dev tools, proximity and much more – A huge week for CSS animation - explore everything from 3D transforms, creating curved animations, de
#93

May 7, 2018

CSS Animation Weekly #93 - Animating Email, Exploding buttons and more – This week we're adding animation to our emails, and exploding our buttons into particles, along with
#92

Apr 30, 2018

CSS Animation Weekly #92 - Native page transitions, «Progress», Multidirectional email and more – A massive week this week in animation as the new Boys and Girls website arrives, we learn how to anim
#91

Apr 23, 2018

CSS Animation Weekly #91 ✨ Special: Tools, libraries, inspiration sources and more ✨ – A massive issue this week! We'll be looking into what sorts of tools, libraries and sources of inspir
#90

Apr 16, 2018

CSS Animation Weekly #90 - Radial Progress Bars, Spinners, performance and more – This week we're creating awesome radial progress bars with SVG, making spinners with CSS, and learnin
#89

Apr 9, 2018

CSS Animation Weekly #89 - Inspiration special – All inspiration this week! Checkout some of the amazing things people have been creating using CSS an
#88

Apr 2, 2018

CSS Animation Weekly #88 - Grid menu, Snake animations, Interactive MDN and loads more – This week we're learning some fun grid menu animations, creating snake-like form inputs and seeing ho
#87

Mar 26, 2018

CSS Animation Weekly #87 - ✨ Behind the Illusions, Mastering Animista ✨ – Magic is in the air! This week we're learning how to animate confidently at 60fps, mastering on-deman
#86

Mar 19, 2018

CSS Animation Weekly #86 - Moving from Flash, Glitchy slideshows, Animated paths and more – A huge week of animation! This week we're learning all the ways we can move past Flash, creating glit
#85

Mar 12, 2018

CSS Animation Weekly #85 - Good to great animation, Houdini for animating transforms and more – This week we're taking our animations to the new level, learning some mind-bending new approaches to
#84

Mar 5, 2018

CSS Animation Weekly #84 - Scroll-linked animation made easy, learning CSS Animation and more – This week we're exploring how we can add scroll animation to projects, learning the basics of CSS ani
#83

Feb 26, 2018

CSS Animation Weekly #83 - CSS Variable hover effects, animated fragment slideshows – This week we're learning how CSS variables can be used to create some amazing hover effects, and crea
#82

Feb 19, 2018

CSS Animation Weekly #82 - Scrolling letters, Vue spinners, React transitions – This week we're creating amazing letter effects, and bringing animation to our Vue and React projects
#81

Feb 12, 2018

CSS Animation Weekly #81 - Animated download button, and much inspiration – This week we're building an amazing animated download button and exploring some amazing animated Code
#80

Feb 5, 2018

CSS Animation Weekly #80 - Topography animation, 3D particles, a loads of inspiration – So much cool stuff around! This week is all about mouse interactions, topographic and kaleidoscopic g
#79

Jan 29, 2018

CSS Animation Weekly #79 - Stack Motion effects, CSS Clip Path, Micron.js and more – This week we're exploring how motion effects can help us demonstrate stacks of items, learning how th
#78

Jan 22, 2018

CSS Animation Weekly #78 - CSS vs JavaScript, CSS Variables and more – A huge week this week! We'll be tacking the age-old question, should you use JavaScript or CSS for yo
#77

Jan 15, 2018

CSS Animation Weekly #77 - Decorative letter animations, making animation feel natural – This week we're creating beautiful letter effects, and making considered use of keyframe animation fo
#76

Jan 8, 2018

CSS Animation Weekly #76 - Additive Animations, After Effects to CSS – This week we learn about some new approaches to combining animation effects, and being inspired by aw
#75

Jan 1, 2018

CSS Animation Weekly #75 – Happy new year! This week we're taking a look back at the awesomeness, and getting inspired by some m
#74

Dec 25, 2017

CSS Animation Weekly #74 - Glitch effect, draw your own snowman – This week we have all sorts of Christmas-themed inspiration. Have a lovely holiday everyone!PS. Keep
#73

Dec 18, 2017

CSS Animation Weekly #73 - Last minute animation, loads of inspiration – This week we're taking on the challenge of bringing animation into our design process, and delving in
#72

Dec 11, 2017

CSS Animation Weekly #72 - Creative strokes, animating borders, Vue.js animation examples – Loads to learn this week! We begin by animating strokes in SVG, then learn some of the challenges in
#71

Dec 4, 2017

CSS Animation Weekly #71 - FLIP technique, tweaking animation performance – It's December already!? Where did the year go :) This week we're learning how to animate layouts usin
#70

Nov 27, 2017

CSS Animation Weekly #70 - Breathe, Animating a 3D phone and loads more – It's Cyber Monday! This week we're recreating the gorgeous "Breathe" animation from Apple Watch, and
#69

Nov 20, 2017

CSS Animation Weekly #69 - 🎂, 🛁, 🌴 – This week we're looking back at some awesome inspiring tutorials from CSSAnimation.rocks, as well as
#68

Nov 13, 2017

CSS Animation Weekly #68 - Clipped shapes, Star to Heart animations, Expanding Grid Items – This week we're learning how to animate clipped shapes, animated SVG shapes using vanilla JS and expe
#67

Nov 6, 2017

CSS Animation Weekly #67 - Codevember, Song exploding and loads of inspiration – It's November, and that means it's time to flex our creative coding talent with Codevember! This week
#66

Oct 30, 2017

CSS Animation Weekly #66 - Animating mascots, rotating animations and more – This week we're animating mascots, workout out how to stop a rotating animation properly, and getting
#65

Oct 23, 2017

CSS Animation Weekly #65 - SVG Overlays, Game characters, Progress rings and more – A massive week for front-end development and animation, and this issue is packed with articles and in
#64

Oct 16, 2017

CSS Animation Weekly #64 - Yoshi's Island, Smarter animation code – This week we're learning how that amazing "Y0shi's Island" demo was made, and exploring new tools for
#63

Oct 9, 2017

CSS Animation Weekly #63 - Pure CSS Button, GSDevTools and more – So much going on this week! We begin by learning how to build and animate a play/pause button, as wel
#62

Oct 2, 2017

CSS Animation Weekly #62 - Get started with CSS animation, VR with Three.js, and Draggable JS – This week we're learning the differences between transitions, animations, web animation API and when
#61

Sep 25, 2017

CSS Animation Weekly #61 - Animation in design systems, CSS Sticky Event, and more – This week we're looking at how we work with teams to ensure animation isn't left to chance, and playi
#60

Sep 18, 2017

CSS Animation Weekly #60 - Working with animations, Skeleton screens, and Rethinking Drag-and-drop – Loads going on this week - see how you can use Firefox to better design and edit animations, how anim
#59

Sep 11, 2017

CSS Animation Weekly #59 - Discover CSS Transforms, Fancy reveals, useful tools and more – A big week this week! We're learning how to make use of the power of transforms, crafting reveal anim
#58

Sep 4, 2017

CSS Animation Weekly #58 - Eclipse inspiration, requestAnimationFrame Superpowers and more – This week it's an eclipse special! Also be sure to take a moment to read about the awesome things we
#57

Aug 28, 2017

CSS Animation Weekly #57 - Fancy Greensock Plugins, React Native animation and more – This week we're seeing how Greensock's plugins can make the already awesome animation platform even b
#56

Aug 21, 2017

CSS Animation Weekly #56 - Animation design, Scroll inspiration, Morphing page transitions – This week we're taking inspiration in scrolling, and learning how to manipulate SVG paths for smoothe
#55

Aug 14, 2017

CSS Animation Weekly #55 - Achieving 60 FPS, Animating icons, Angular, and more – This week we're jumping into the art of optimising animation performance, learning how to bring icons
#54

Aug 7, 2017

CSS Animation Weekly #54 - Amazing animations, Animated loaders and AngularJS – This week we're amazing our customers with CSS animations, creating custom loaders, and animating our
#53

Jul 31, 2017

CSS Animation Weekly #53 - Bye bye Flash, Web Animation tools and more – So the big news this week was Adobe's announcement that they are finally killing off Flash (in a few
#52

Jul 24, 2017

CSS Animation Weekly #52 - One Year competition, Building CSS games and more – It's our anniversary! This week we celebrate a year of CSS animation inspiration (and gratuitous emoj
#51

Jul 17, 2017

CSS Animation Weekly #51 - Animating the web, Letter effects – This week we're learning how animation helps our web interfaces, experimenting with awesome letter ef
#50

Jul 10, 2017

CSS Animation Weekly #50 - Animating modals, logo animation concepts and animated icons – This week we're animating modals along paths, exploring beautiful logo animation concepts and grabbin
#49

Jul 3, 2017

CSS Animation Weekly #49 - UI Animation with Principle, Organic SVGs and more – Let's learn how to build impressive prototype animations, explore all the angles of a 3D CSS cube, an
#48

Jun 26, 2017

CSS Animation Weekly #48 - Tools, tips and inspiration – This week... tools! We have some exciting animation tools, a neat scrolling framework, and even tool-
#47

Jun 19, 2017

CSS Animation Weekly #47 - Animating SVG, Avoiding burnout and Faster page load – This week we're listening to the awesome Sarah Drasner and learning how CSS and SVG animation can mak
#46

Jun 12, 2017

CSS Animation Weekly #46 - Animating single div art, Performance tools – This week we learn how CSS custom properties can make complex CSS animations easier to read, and opti
#45

Jun 5, 2017

CSS Animation Weekly #45 - Animated SVG icons, responsive typography – This week we're learning all about building animated SVG icons, and delving into how we can animate o
#44

May 29, 2017

CSS Animation Weekly #44 - Animating 100,000 points, Morphing SVG and more – This week we're taking Canvas to the max by animating 100,000 points, morphing SVG shapes on scroll,
#43

May 22, 2017

CSS Animation Weekly #43 - Folder previews, animated deliverables – This week we're loving the inspiring folder ideas, and contemplating how we can improve our design wo
#42

May 15, 2017

CSS Animation Weekly #42 - UI emotions and 3D tubes – This week we consider how emotion can be part of how we design animations, before diving into some cr
#41

May 8, 2017

CSS Animation Weekly #41 - Web Animations vs CSS Animation – This week we're learning how the Web Animation API compares to CSS keyframe animations, and sharing s
#40

May 1, 2017

CSS Animation Weekly #40 - SVG Line Morphing, WebGL spirals, prototyping and more – This week we're learning how to animate our carousel steps, experimenting with WebGL scroll effects,
#39

Apr 24, 2017

CSS Animation Weekly #39 - Transitions in space, scroll-triggered animations and more – Loads of great reading this week, including learning how to make great use of transitions in hover ev
#38

Apr 17, 2017

CSS Animation Weekly #38 - Motion in design, crazy 3D rooms and more – This week we learn how to handle the great power of animation, experiment with some awesome 3D rooms,
#37

Apr 10, 2017

CSS Animation Weekly #37 - Usability with motion, accordions and more – This week we're learning how animation can really help and play and big part of UX, experimenting wit
#36

Apr 3, 2017

CSS Animation Weekly #36 - VueConf, animation performance, ThreeJS and Clocks – So much going on this week! We learn how to create the VueConf logo in SVG, we tackle the old problem
#35

Mar 27, 2017

CSS Animation Weekly #35 - Space, Innovative hover effects, free screencasts and more – So much going on this week! Learn about the latest in innovative hover effects, build an awesome hero
#34

Mar 20, 2017

CSS Animation Weekly #34 - Animating thousands of points – This week we're learning how efficient Canvas can be at animating large sets of data, as well as some
#33

Mar 13, 2017

CSS Animation Weekly #33 - Hero headers, keyframes and inspiration – This week we learn how to animate a hero header, master our keyframes and learn from CodePen examples
#32

Mar 6, 2017

CSS Animation Weekly #32 - SVG strokes, Kute.js Easings, Designer Report – This week we're fixing our SVG stroke animations, looking into the new animation framework Kute.js, a
#31

Feb 27, 2017

CSS Animation Weekly #31 - CSS variables, transitionend, Search UI ideas – A mix of technical learning and gorgeous inspiration this week. Learn how CSS variables can help our
#30

Feb 20, 2017

CSS Animation Weekly #30 – A blockbuster of awesome articles this week, including loads of modern fast front-end tips, diagonal
#29

Feb 13, 2017

CSS Animation Weekly #29- Web animation 2017, direction aware hovers and more – This week we're learning all about the state of the art of web animation in 2017, creating direction-
#28

Feb 6, 2017

CSS Animation Weekly #28 - CSS Drawings, Hamburgers and Vue.js – Here's the latest CSS animation tutorials and inspiration from around the web. This week we're learni
#27

Jan 30, 2017

CSS Animation Weekly #27 - WebSockets and graceful timing – A huge week to finish up January, 2017. This week we're learning the magic of WebSockets with CSS ani
#26

Jan 23, 2017

CSS Animation Weekly #26 - End states, The Wave, CSS particles and more – This week we're learning about using keyframes efficiently, cutting edge crazy SVG stuff, and checkin
#25

Jan 16, 2017

CSS Animation Weekly - Issue #25 - You spin me round round baby – One challenge in creating web animations is when animating curved paths and ellipses. This week we se
#24

Jan 9, 2017

CSS Animation Weekly - Issue #24 - Mirror effects, inspiration and more – This week we learn how to create some nifty mirror effects, check out some 3D CSS animations and see
#23

Jan 2, 2017

CSS Animation Weekly - Issue #23 – Welcome to 2017! I hope you have had a lovely time over the holidays. Here's to a fun inspiring 2017.
#22

Dec 26, 2016

CSS Animation Weekly - Issue #22 – Season's greetings to you all, and thank you for subscribing to CSS Animation Weekly. Lots of learnin
#21

Dec 19, 2016

CSS Animation Weekly - Issue #21 - GPU performance, design systems, css variables and inspiration – This week we think about performance, optimising how we use the GPU in animations, working with desig
#20

Dec 12, 2016

CSS Animation Weekly - Issue #20 - Functional animation, CSS parallax, sketching interface animations – Loads happening this week! We start with an inspiring and useful talk from Sarah Drasner all about an
#19

Dec 5, 2016

CSS Animation Weekly - Issue #19 - Inspiration, inspiration, inspiration – This week we're all about the inspiration! Get your creative ideas flowing for the holiday season wit
#18

Nov 28, 2016

CSS Animation Weekly #18 - #animationchat, Tilt hover effect, staggering animations and inspiration – An exciting week coming up! Along with the exciting #animationchat, we're loving the tilt hover effec
#17

Nov 21, 2016

Enhancing UX, learn Mo.js, SVG Line animation and inspiration
#16

Nov 14, 2016

Advent calendar, sprite animation, cubes, grids, and fun CSS inspiration
#15

Nov 7, 2016

Smooth web animations, designing better UI animation, Wake Up Neo and inspiration
#14

Oct 31, 2016

Spooooky CSS Selectors, SVG animation, tone and voice and Halloween inspiration
#13

Oct 24, 2016

Micro-animations, Letter effects, CSS Variables, Topple Trump, SVG line animations and inspiration
#12

Oct 17, 2016

Stripe menu, animated line effects, You Don't Need JS, and spooky inspirations
#11

Oct 10, 2016

CSS Masks, Power up your menus, MailChimp marketing tips and all sorts of SVG, Canvas and CSS inspiration
#10

Oct 3, 2016

Communicating animation, working with 3D, Web Animation Workshops, tools and inspiration
#9

Sep 26, 2016

Background segment effects, the history of web animation, jank-free, and loads of inspiration
#8

Sep 19, 2016

Trigger on scroll, Harry Roberts, Glitch effects, LightCMS, SVG animations, and flipping cards tutorial
#7

Sep 12, 2016

Power up your menus, CSS artwork, 3D animations, radio buttons and gradients
#6

Sep 5, 2016

Animate like you just don't care, get inspired by hover effects, cubes, space and books
#5

Aug 29, 2016

Motion curves, microinteractions, retro walkman, sorting algorithms, and understanding your customers with Hotjar
#4

Aug 22, 2016

Tools, WebGL, CSS approaches, Bouncy ball comparison and code-driven art
#3

Aug 15, 2016

Buttery smooth animations, Stripe design chat, SVG images and CSS/HTML-based artwork
#2

Aug 8, 2016

CSS reflections, underwater landings, SVGs, Olympics and TV 404s
#1

Aug 1, 2016

Enhance UX, Fake it till you Make it, Animation Technologies, Inspiration