Nice post by the Vox Media team detailing how the line animations work in their epic PS4 review. Little weird not to credit Jake though.…
If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will …
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 …
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:
If you need to indicate “please wait, something is happening” on a website, a spinner has long been the go-to choice. Probably an animated GIF, although there are other options like CSS animations, apng, SVG, or canvas. James Padolsey …
For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers …
It has been a long-standing bug in WebKit that pseudo elements (like ::before and ::after) cannot be animated or transitioned. As of yesterday that bug was fixed thanks to Elliott Sprehn. You can pop open Google Chrome Canary and see …
The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with …
While screwing around at the ol’ Zen Garden, I ran into a pretty neat little effect for underlined links. We’ve talked about this before, but never incorporating animation.
A “walking link” is a link with a dotted underline …