This weekend I had a chance to work on a personal side project, Project Banner for Atom Text Editor, and as it usually goes, I often try new things or experiment with stuff I’m not that familiar with.
This time I focused on a tiny animation feature, the transition-delay property. Using it you usually delay the animation of a transition a few milliseconds or seconds depending on what you’re trying to achieve.
.my-element {
transition: background 120ms ease-in-out;
transition-delay: 0.3s;
background: #FFF;
}
.my-element:hover {
background: #F00;
}In the example above, an element with the class name my-element will change its background from white to red when a user hover above the element, and the transition is delayed 0.3 seconds so the user must stay on the element for at least 0.3 seconds for the animation to kick in.
Technicality the feature only supports “zero or greater” values, but I’ve noticed something funky when reducing the value below zero — it predicts the users movement on the page and activates the animation before the user actually reaches the element.
.my-element {
background: #FFF;
transition-delay: -0.5s;
}
.my-element:hover {
background: #F00;
}In this example the element has a delay of negative 0.5 seconds, and a surprising behavior is exposed.
It seems that currently this works on latest Chrome version 54, and the Canary version. I tried it on Firefox, Edge, Internet Explorer and Safari, none of them exhibit the same behavior which leads to postulate that this is a Chrome related feature that is developed by Google using their predictive algorithms.
Try it yourself on this codepen: http://codepen.io/anon/pen/woNvEX
This could be a very useful feature if developed as part of the the HTML5 specs.
