Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
keyframes

16 Articles
{
,

}
Animated gif. We start with a grey background and we have an orange pie slice (circular sector) growing from nothing to covering everything around the central point. Then we have a grey pie slice growing from nothing to covering everything around the central point and we're back where we started from: a grey background.
Direct link to the article The State of Changing Gradients with CSS Transitions and Animations
css animation gradients keyframes transition

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I …

Avatar of Ana Tudor
Ana Tudor on Jun 1, 2018 (Updated on Mar 26, 2021)
Direct link to the article CSS Animations vs Web Animations API
keyframes waapi web animation

CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series.

In this article, …

Avatar of Ollie Williams
Ollie Williams on Jun 13, 2017 (Updated on Aug 18, 2018)
Direct link to the article Animate to Different End States Using One Set of CSS Keyframes
keyframes particles

Animate to Different End States Using One Set of CSS Keyframes

I have recently live coded a pure CSS random rainbow particle explosion. There’s a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem …

Avatar of Ana Tudor
Ana Tudor on Jan 20, 2017 (Updated on Feb 7, 2017)
animation keyframes

Swapping State with CSS Keyframes

Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop.

No tweening between the state, just a straight swap.…

Avatar of Chris Coyier
Chris Coyier on Nov 22, 2016
animation CSS keyframes

CSS Keyframe Animation with Delay Between Iterations

Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it’s not-so-straightforward, but doable. You need to fake it.…

Avatar of Chris Coyier
Chris Coyier on Jul 20, 2016
  • Newer
  • 1
  • 2

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top