# web animation The practice and technology of creating timed, synchronized visual changes in web page presentation, using mechanisms such as CSS, SVG, and browser animation APIs. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## React 19.3 DevFeed: [React 19.3]() Original publisher: [Read original article]() Author: The React Team Published: 2026-09-09T00:00:00Z Content type: release Language: en Sources: [React Blog]() Topics: [React UI animations](), [web animation](), [modern web development](), [Web platform]() Tags: [animation](), [api](), [browser](), [css](), [react](), [release](), [view-transitions]() ### AI overview React 19.3 stabilizes View Transitions and Fragment Refs. The article focuses on using View Transitions to animate UI updates, with CSS and Web Animations API customization options. ### Source excerpt React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more. ## Timing Charts: A Blueprint For SMIL Animations DevFeed: [Timing Charts: A Blueprint For SMIL Animations]() Original publisher: [Read original article]() Author: hello@smashingmagazine.com (Johan Grobler) Published: 2026-08-20T13:00:00Z Content type: tutorial Language: en Sources: [Articles on Smashing Magazine -- For Web Designers And Developers]() Topics: [SVG](), [SVG animations in CSS](), [frontend animation](), [web animation]() Tags: [animation](), [article](), [css](), [css-animations](), [design](), [svg]() ### AI overview This article explains SMIL as a way to animate SVG graphics without JavaScript. It introduces timing charts as a planning tool for coordinating animation start and stop times, and discusses how structured planning can make verbose SMIL markup easier to manage. ### Source excerpt Discover SMIL, the often-overlooked way to animate SVGs that works inside `` tags and can fully animate everything in an SVG without JavaScript. ## Using CSS animations instead of JavaScript timers DevFeed: [Using CSS animations instead of JavaScript timers]() Original publisher: [Read original article]() Author: Stanko Published: 2023-08-04T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS animations](), [JavaScript](), [web animation](), [Document Object Model (DOM)]() Tags: [animations](), [api](), [css](), [css-animations](), [javascript]() ### AI overview This tutorial explains how to build timers with CSS animations and class changes instead of JavaScript timer functions. It covers pausing, resuming, restarting, animation events, repeated timers, chaining timers, and using the approach for an autoplaying carousel. It also notes that precise progress tracking requires the Web Animations API. ### Source excerpt What if I told you that we can make a timer without using setTimeout, setInterval or requestAnimationFrame? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes. While I was working on an autoplay feature for a carousel, I thought to myself - CSS animations are kinda like timers. They have animationstart and animationend events and an ability to pause them. On top of that, we get the animation loop for free, which we would have to implement manually in JavaScript. Implementation # To make the timer, we'll need four CSS classesPlease note that we could create a minimal example with only two classes (.timer and .timer--running), but it is pretty limiting and therefore we are going to skip it.: .timer - initial styles .timer--running - starts the animation .timer--paused - pauses the animation (can only be used in combination with .timer--running) .timer--done - final state of the animation We'll start a timer by adding a .timer--running class. In the case that we are restarting it, we also need to remove the .timer--done class. // Start the timer $timer.classList.add('timer--running'); // $timer is a reference to the timer's DOM element $timer.classList.remove('timer--done'); To pause it we'll add .timer--paused class. Resume it by removing the class. // Toggle the pause class $timer.classList.toggle('timer--pause'); Once animationend event is triggered, we know the animation is done, so we need to add .timer--done and to remove .timer--running class. // Update classes so the timer can be restarted $timer.classList.add('timer--done'); $timer.classList.remove('timer--running'); When we put it all together, we get a minimal working example: Start / stop Code is also available on CodePen for you to play with. This timer works similarly to setTimeout, but it comes with it's own animation loop and an easy way to pause it. animationiteration # To get a behavior similar to setInterval we are going to switch to animationiteration instea ## Designing accessible animation DevFeed: [Designing accessible animation]() Original publisher: [Read original article]() Author: Kelly Gillit Published: 2020-12-22T00:00:00Z Content type: article Language: en Sources: [The A11Y Project]() Topics: [Accessibility](), [web animation](), [Responsive Design](), [User interface design]() Tags: [accessibility](), [animation](), [developers](), [digital-products](), [motion-design](), [responsive-design]() ### AI overview This article explains how to design accessible animation for digital products. It discusses motion-related risks, responsive animation, limiting duration and repetition, and giving users controls to pause, stop, or hide animations. ### Source excerpt Animation is used in digital products in many ways, such as drawing a user's focus to a particular area on the screen, providing another layer to a brand's style with unique and ownable motion design, and adding a spark of unexpected fun to an otherwise robotic interaction. But designing animation that surprises and delights accessibly is trickier than it sounds. Dizziness, nausea, disorientation, migraines, and even seizures can all be caused by well-executed yet inaccessible motion design. Because of this, it is critical to design your animation with both aesthetics and accessibility in mind. Consider parallaxing--large-scale animation where the foreground and background slide past each other at different speeds--and primary navigation based on horizontal scrolling. These effects, especially when dramatic, can trigger the symptoms mentioned earlier. Animations inherently carry a lot of visual and cognitive weight, so always take into account how the user will be viewing it. Desktop screens are interacted with at a greater distance than handheld devices, therefore any animation should be responsive to avoid overwhelming or distracting users from anything essential. Users with cognitive and learning disabilities may especially appreciate this. Next, rein in the animations. Endlessly looping animations at any size can be more disorienting than delightful. Specifying the number of cycles it will play, limiting the duration that it plays, or having the animation paused by default will ensure its accessibility. Another way to handle this is by designing controllers that allow the user to pause, stop, or hide the animation altogether. While it's essential that accessible animation starts at the design level, there are additional ways developers can implement these tips behind the scenes. We've included some links to help show you how. ## Web Animations API improvements in Chromium 84 DevFeed: [Web Animations API improvements in Chromium 84]() Original publisher: [Read original article]() Published: 2020-05-27T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [web animation](), [Chromium](), [API]() Tags: [chromium](), [improvements](), [performance](), [web]() ### AI overview The article describes Web Animations API improvements introduced in Chromium 84, including promise-based animation orchestration, replaceable animations for performance, and composite modes for smoother animations. ### Source excerpt Orchestrating animations with promises, performance improvements with replaceable animations, smoother animations with composite modes, and more. ## CSS only sprite animations DevFeed: [CSS only sprite animations]() Original publisher: [Read original article]() Author: Stanko Published: 2019-07-05T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [CSS animations](), [web animation](), [Code](), [Web Development]() Tags: [animations](), [code](), [css](), [css-animations](), [pixel]() ### AI overview A tutorial on creating sprite and frame-by-frame animations using CSS only. It compares separately animated frames with a single parent animation using the steps() timing function, and demonstrates the technique with a retro text loader and pixel-art images. ### Source excerpt I haven't published anything in a while, which is a shame because I have a couple of good things to write about. That said, today's post is going to be a short one. I wasn't sure if theme is interesting enough. But in the end I decided to write it anyway. And it will help me get back in the writing shape. While setting up a new project on Netlify, I was going through the logs and noticed they are using old schoolAs far as I know people started using it back in the 80s. text only loader. It is a very simple animation swapping between four text characters (--, \, |, /). Haven't even checked if they are using gif or not, but immediately tried recreating it using CSS only. The first version # The first thing I tried was to stack frames one of top of the other, and then animate every frame separately. Animation will make element visible only for the duration of one frame. Then using animation-delay we can adjust each frame. Code for four frames looked something like this: $frame-duration: 125ms; @keyframes frame-animation { 0%, 25% { opacity: 1; } // Make opacity transition from 1 to 0 as short as possible 25.01% { opacity: 0; } } // Add delay for each frame @for $i from 1 through 4 { .Animation-frame:nth-child(#{ $i }) { animation-delay: 250ms * ($i - 1); } } This worked well for our retro loader with four frames. Then I tried to animate images in the same way and again it worked fine. Applying common hacks to activate hardware acceleration didn't help, so I went back to the drawing board. Animation steps to the rescue # First order of business was to try to remove animations for individual frames, and use only one on the parent element. And to do it without JavaScript. Something like a slider, where slides are swapped without animation. Then it hit me! I remembered seeing that CSS animations can use steps. So I searched for it and found out the syntax: animation-timing-function: steps(4); What MDN says about steps: Displays an animation iteration along n stops along the ## The Science of Web Animations: How Sensory Memory Shapes User Experience DevFeed: [The Science of Web Animations: How Sensory Memory Shapes User Experience]() Original publisher: [Read original article]() Published: 2015-02-09T00:00:00Z Content type: opinion Language: en Sources: [Una Kravets]() Topics: [web animation](), [Website]() Tags: [animation](), [experience](), [performance-optimization](), [web]() ### AI overview This article explains how sensory and iconic memory relate to web animation and argues that animations linking visual states can improve user experience. ### Source excerpt Neuroscience plays a big roll in our design work. This post takes a look at Sensory Memory and how animations that visually link states can improve a user's experience. ## A primer to vestibular disorders DevFeed: [A primer to vestibular disorders]() Original publisher: [Read original article]() Author: Dennis Gaebel Published: 2013-05-05T00:00:00Z Content type: article Language: en Sources: [The A11Y Project]() Topics: [CSS animations](), [web animation](), [how to create smooth CSS transitions](), [browser](), [Web Development]() Tags: [animation](), [browser](), [css](), [css-animations](), [web](), [web-animation]() ### AI overview This article introduces vestibular disorders, explaining how inner-ear dysfunction can affect balance, visual perception, concentration, and mobility. It then discusses how animations, parallax scrolling, sliders, videos, and rapid movement can worsen symptoms, and recommends accessible practices such as avoiding autoplay, indicating expected movement, providing controls to disable motion, and using the CSS prefers-reduced-motion media query. ### Source excerpt Your Vestibular system is the sensory mechanism in the inner ear that detects movement of the head and helps to control balance. Imagine a world where your internal gyroscope is not working properly. Very similar to being intoxicated, things seem to move of their own accord, your feet never quite seem to be stable underneath you, and your senses are moving faster or slower than the rest of your body. Your personal steady-cam is broken. Whatever you look at tends to move regardless of if you are moving. Let's take that feeling and check out that great new website with animations and parallax scrolling. Does your stomach want to jump out of your throat? Well for many people it does. What is it? People with vestibular disorders have a problem with their inner ear. It affects their balance as well as their visual perception of their world around them. Sometimes the sensation lasts only a short while, but others can experience it for years. Walking can become a challenge and they may experience a constant risk of falling. Concentration can be diminished, leaving a person unfocused and consequently unproductive. It is often viewed as a "hidden" disability because it has no outward showing symptoms. Who is at risk? The cause may be from illness, injury, or a genetic condition, but anyone can suffer from a vestibular disorder. According to vestibular.org, a resource for people with vestibular disorders, as many as 35% of adults aged 40 years or older in the United States have experienced some form of vestibular dysfunction. What should you consider? Don't make animations, sliders, videos, or rapid movement start automatically. Give an indicator of what movement will happen on the site when someone takes action. Allow the option to turn off any animation and movement at any point in the process. Also, with the CSS prefers-reduced-motion media query you can write conditional CSS animations and transitions based on the user's preference exposed from the browser settings. For e