Let's see if Serif Fonts are Nice with a gradient background and hover.
Box Decoration Break
For more coding articles please check out my main site designkojo.com
These demos illustrate the box-decoration-break property. The gradient effect is applied as a background, and the background-size is transitioned from 0% width to 100%. For more details on how the gradient is done please read Animating Gradient Text Backgrounds on Hover for Links.
The code for this can be found on GitHub.
The above illustrates the default value; Box-decoration-break: slice; inline in a paragraph, this works well.
Let's see if Serif Fonts are Nice with a gradient background and hover.
Box-decoration-break: clone; This is not the best place to use it.
Box-decoration-break: clone; As a title, this works well.
Slide In Effect Sped Up
This is the slide effect sped up, but still a little slow.
The first one using slice, and the second using clone.
Box-decoration-break: slice;
Box-decoration-break: clone;
Box Decoration Break — Background Position
This example transitions the background-position from -600px on the x-axis to 0.
I have sped this up to a normal transition timing of 300ms
Box-decoration-break: slice;
Box-decoration-break: clone;