Skip to main content
CSS is fun and cool and I like it.
Article

ease-out, in; ease-in, out

We got to talking about easing in a recent episode of ShopTalk with Val Head and Sarah Drasner. Easing is important stuff when it comes to animations and transitions. Combined with the duration, it has a huge effect on the feel of change. If you're taking animation seriously as part of the brand on a project, you should define and consistently use easings.

That said, it's a balance between:

  • Crafting/using easings that match your brand
  • Adhering to soft "rules" about
Read article
Article

Controlling CSS Animations and Transitions with JavaScript

The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial.… Read article

Almanac

transition-delay

The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition.

.delay-me {
  transition-delay: 0.25s;
}

The value can be one of the following:

  • A valid time value defined in seconds or milliseconds e.g. 1.3s or 125ms
  • A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element e.g. 1s background-color, 350ms transform

The default value for transition-delay is … Read article

icon-link icon-logo-star icon-search icon-star