Search
How to Control CSS Animations with JavaScript
27.12.2022
When it comes to animations on the web, developers need to measure the animation’s requirements with the right technology — CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With document.getAnimations, however, you can...
How to Build Your First Custom Svelte Transition
14.1.2022
The Svelte transition API provides a first-class way to animate your components when they enter or leave the document, including custom Svelte transitions. By default, the transition directive uses CSS animations, which generally offer better performance and allow the browser’s …
How...
Collective #693
30.12.2021
Typejuice * PrinceJS * CSS in 2022 * React Native Skia * Smoothly Reverting CSS Animations
The post Collective #693 appeared first on Codrops
Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines
19.7.2021
The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Using the @scroll-timeline at-rule and animation-timeline property this specification provides you can control the time position of regular CSS Animations by scrolling.
In this post, we take a …
The...
Build Complex CSS Transitions using Custom Properties and cubic-bezier()
14.7.2021
I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I …
The post Build Complex CSS Transitions using Custom...
How I Used the WAAPI to Build an Animation Library
16.6.2021
The Web Animations API lets us construct animations and control their playback with JavaScript. The API opens the browser’s animation engine to developers and was designed to underlie implementations of both CSS animations and transitions, leaving the door open to …
The post How I Used...
Advanced CSS Animation Using cubic-bezier()
13.5.2021
When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in …
The post Advanced CSS Animation Using cubic-bezier()...
How to Play and Pause CSS Animations with CSS Custom Properties
21.1.2021
Let’s have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get …
The post How to Play and Pause CSS Animations with...
Additive Animations in CSS
3.11.2020
Daniel C. Wilson explains how with CSS @keyframe animations, when multiple of them are applied to an element, they do both work. But if any properties are repeated, only the last one works. They override each other. I’ve seen this limitation overcome by applying keyframes to nested elements...
How CSS Perspective Works
9.9.2020
As someone who loves creating CSS animations, one of the more powerful tools I use is perspective. While the perspective property is not capable of 3D effects all by itself (since basic shapes can’t have depth), you can use the transform property to move and rotate objects in a 3D space (with...
Performant Expandable Animations: Building Keyframes on the Fly
1.4.2020
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work.
You probably know that animations should...
Use and Reuse Everything in SVG… Even Animations!
28.1.2020
If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with <use> element, CSS Variables and...
Using Custom Properties to Wrangle Variations in Keyframe Animations
12.9.2019
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would so nice to drop yet one more dependency and go with vanilla CSS.
Well, I found a way to account for variations within...
CSS prefers-reduced-motion Media Query
30.7.2019
When I started in the web development industry, media queries were limited — screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color scheme preference. I’ve been...
Writing Animations That Bring Your Site to Life
22.2.2019
Web animation is one of the factors that can strongly enhance your website’s look and feel. Sadly, unlike mobile apps, there aren’t as many websites using animation to their benefit as you would think. We don’t want to count yours among those, so this article is for you and anyone else looking...
Slide an Image to Reveal Text with CSS Animations
29.1.2019
I want to take a closer look at the CSS animation property and walk through an effect that I used on my own portfolio website: making text appear from behind a moving object. Here’s an isolated example if you’d like to see the final product.
Here’s what we're going to work with:
See the...
Reversing an Easing Curve
17.12.2018
Let’s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the animation-timing-function property, instead of using a standard easing keyword.
See the Pen Carousel with reversed...
Create the Google Button Effect with CSS
27.7.2018
I always found Google’s branding simple but grew to realize that was the beauty in their design; there’s something about “just enough” that is the perfect balance between bland and over the top. GMail’s design grew old over the years and Google just got around...
Inspecting Animations in DevTools
4.5.2018
I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could’ve hoped: it lets you control and manipulate CSS animations and visualize...