Tagged “transform”
4 Ways to Animate the Color of a Text Link on Hover | CSS-Tricks
Let’s create a pure CSS effect that changes the color of a text link on hover – but slide that new color in instead of simply swapping colors.
Katherines post explores four different techniques to achieve the effect, and their comparative pros and cons with regard to accessibility, performance, and browser support.
Technique 4, which uses a CSS transform
seems to be the most flexible, best-performing and has best cross-browser support, however because it requires adding a semantically redundant <span>
into the anchor I would use it sparingly rather than on all links by default.
Using CSS Custom Properties to streamline animation
Thanks to a great tip from Lucas Hugdahl on Twitter, here’s how to use CSS custom properties (variables) in your transforms so you don't need to rewrite the whole transform
rule in order to transition
(animate) a single property.
Let’s take the simple example of a button
that we want to increase in size when hovered.
By using a custom property for the scale
value, we can keep things DRYer in our :hover
rule by only updating that variable rather than rewriting the entire transform
rule.
The button HTML:
<button>Hover over me</button>
CSS:
button {
transition: transform .5s ease-in-out;
transform: translateX(-50%) translateY(-50%) scale(var(--scale, 1));
}
button:hover {
--scale: 2;
}
Fading out siblings on hover in CSS (by Trys Mudford)
Here’s a nice CSS-only hover technique from Trys Mudford incorporating scale transforms, opacity transitions and mouse pointer events.
See all tags.