How To Create An Animation That Changes Text Color In Html

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.

In that location are iv different techniques we can use to do this. Let's look at those while being mindful of important things, like accessibility, performance, and browser support in mind.

Let'south get started!

Technique 1: Using background-clip: text

At the time of writing, the background-clip: text property is an experimental characteristic and is non supported in Internet Explorer 11 and below.

This technique involves creating knockout text with a difficult terminate gradient. The markup consists of a single HTML link (<a>) element to create a hyperlink:

          <a href="#">Link Hover</a>

We can get-go calculation styles to the hyperlink. Using overflow: subconscious will clip whatsoever content exterior of the hyperlink during the hover transition:

          a {   position: relative;   brandish: inline-cake;   font-size: 2em;   font-weight: 800;   color: royalblue;   overflow: hidden; }

We will demand to utilise a linear gradient with a hard end at fifty% to the starting color we want the link to be every bit well as the color that it volition change to:

          a {   /* Same as before */   background: linear-gradient(to right, midnightblue, midnightblue l%, royalblue 50%); }

Allow'due south use background-clip to prune the gradient and the text value to display the text. We will likewise apply the background-size and background-position properties to have the starting color appear:

          a {   /* Aforementioned as before */   background-clip: text;   -webkit-background-prune: text;   -webkit-text-make full-color: transparent;   background-size: 200% 100%;   background-position: 100%; }

Finally, let'due south add the transition CSS property and :hover CSS pseudo-course to the hyperlink. To have the link make full from left to right on hover, use the background-position property:

          a {   /* Same as before */   transition: background-position 275ms ease; } a:hover {   groundwork-position: 0 100%; }

While this technique does achieve the hover effect, Safari and Chrome volition clip text decorations and shadows, meaning they won't exist displayed. Applying text styles, such equally an underline, with the text-decoration CSS property will non work. Maybe consider using other approaches when creating underlines.

Technique 2: Using width/acme

This works by using a data attribute containing the same text as the one in the <a> tag and setting the width (filling the text from left-to-right or correct-to-left) or height (filling the text from top-to-bottom or bottom-to-acme), from 0% to 100% on hover.

Here is the markup:

          <a href="#" data-content="Link Hover">Link Hover</a>

The CSS is similar to the previous technique minus the background CSS backdrop. The text-decoration property will work here:

          a {   position: relative;   display: inline-block;   font-size: 2em;   colour: royalblue;   font-weight: 800;   text-decoration: underline;   overflow: subconscious; }

This is when we demand to use the content from the information-content aspect. It will be positioned in a higher place the content in the <a> tag. We get to use the overnice picayune pull a fast one on of copying the text in the data attribute and displaying information technology via the attr() function on the content holding of the element's ::before pseudo-chemical element.

          a::before {   position: absolute;   content: attr(data-content); /* Prints the value of the attribute */   top: 0;   left: 0;   color: midnightblue;   text-ornament: underline;   overflow: subconscious;   transition: width 275ms ease; }

To keep the text from wrapping to the next line, white-space: nowrap will be practical. To change the link fill color, fix the value for the colour CSS property using the ::before pseudo-element and having the width start at 0:

          a::before {   /* Aforementioned as earlier */   width: 0;   white-space: nowrap; }

Increase the width to 100% to the::before pseudo element to consummate the text effect on hover:

          a:hover::before {   width: 100%; }

While this technique does the fox, using the width or height properties will non produce a performant CSS transition. Information technology is best to utilize either the transform or opacity properties to achieve a smooth, 60fps transition.

Using the text-ornament CSS property can allow for different underline styles to appear in the CSS transition. I created a demo showcasing this using the next technique: the clip-path CSS holding.

Technique 3: Using clip-path

For this technique, nosotros will be using the prune-path CSS belongings with a polygon shape. The polygon volition accept 4 vertices, with two of them expanding to the right on hover:

The markup is the same equally the previous technique. Nosotros will use a ::before pseudo-chemical element again, only the CSS is different:

          a::earlier {   position: absolute;   content: attr(data-content);   color: midnightblue;   text-decoration: underline;   clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);   transition: prune-path 275ms ease; }

Dissimilar the previous techniques, text-ornament: underline must exist declared to the ::before pseudo-element for the color to fill the underline on hover.

At present let's look into the CSS for the clip-path technique:

          prune-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

The polygon's vertices of the clip-path property are set in percentages to define coordinates by the order written:

0 0 = elevation left
0 0 = top right
100% 0 = lesser right
0 100% = bottom left

The management of the fill up effect can be changed by modifying the coordinates. Now that we have an idea for the coordinates, nosotros tin brand the polygon expand to the right on hover:

          a:hover::before {   prune-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

This technique works pretty well, but notation that back up for the clip-path belongings varies between browsers. Creating a CSS transition with clip-path is a ameliorate alternative than using the width/acme technique; however, it does affect the browser paint.

Technique 4: Using transform

The markup for this technique uses a masking method with a <span> chemical element. Since nosotros will be using duplicated content in a carve up element, we will use aria-subconscious="true" to improve accessibility — that volition hide it from screen readers so the content isn't read twice:

          <a href="#"><bridge data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

The CSS for the <span> chemical element contains a transition that volition exist starting from the left:

          bridge {   position: absolute;   acme: 0;   left: 0;   overflow: hidden;   transform: translateX(-100%);   transition: transform 275ms ease; }

Next, we need to go the<span> to slide the right like this:

To exercise this, we will apply the translateX() CSS part and fix it to 0:

          a:hover span {   transform: translateX(0); }

Then, we will employ the ::before pseudo-chemical element for the <bridge>, again using the data-content attribute nosotros did before. We'll set up the position by translating it 100% along the x-axis.

          span::before {    display: inline-block;   content: attr(data-content);   color: midnightblue;   transform: translateX(100%);   transition: transform 275ms ease;   text-decoration: underline; }

Much similar the <span> element, the position of the ::before pseudo-element will as well be set totranslateX(0):

          a:hover bridge::before {   transform: translateX(0); }

While this technique is the the nigh cross-browser compatible of the bunch, information technology requires more markup and CSS to become there. That said, using the transform CSS holding is dandy for performance as it does not trigger repaints and thus produces smooth, 60fps CSS transitions.

In that location nosotros take it!

Nosotros just looked at four different techniques to reach the same effect. Although each has its pros and cons, y'all can see that it'south totally possible to slide in a color change on text. It'due south a bang-up little effect that makes links experience a little more interactive.

Source: https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/

Posted by: gibsonwhiclosselte.blogspot.com