I'm trying to accomplish the effect of when linking to a target element on another page, the target is highlighted and then fades to the default page color, aka white.
A simple example of what I'm looking for is the same as when viewing a linked comment on Stack Overflow: CSS: highlighted text effect
When you first view the comment, it is highlighted a color then transitions to white.
I'm able to make it go from white to another color, but can't seem to do the reverse, and can't find any resources helping directly.
To go from white to red, I have:
:target {
border-radius: 3px;
background-color: red;
transition: background-color 1s linear;
}
html:
The link that takes you to the target:
<div class="col-lg-12 title">Additional<a target="_blank" href="/insight#additional">(?)</a></div>
The target being linked to:
<div class="col-lg-12 section-header" id="additional"><h3>Required</h3></div>
I'd like to do the opposite of this (make it go from red->white).
Any help would be much appreciated, as like I said, I've been looking for a solution but they're just not quite helping.
Thanks!
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
How Do I Highlight Text In CSS? To Highlight text in HTML you have to use an inline element such as the <span> element and apply a specific background style on it. This will create the highlighting effect, which you can tweak in many different ways to create different looks.
This is close to the effect you described
:target {
border-radius: 3px;
animation: highlight 1000ms ease-out;
}
@keyframes highlight {
0% {
background-color: red;
}
100% {
background-color: white;
}
}
<div class="col-lg-12 section-header" id="additional">
<h3>Required</h3>
</div>
<a href="#additional"> Click me </a>
Use the :target
pseudo-class to run a highlight animation.
The
:target
CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
Clicking the link will change the URL's fragment identifier, so now the :target
selector will point to the element with the matching id.
:target {
border-radius: 3px;
animation: highlight 1000ms ease-out;
}
@keyframes highlight {
from {
background-color: red;
}
}
<div class="col-lg-12 section-header" id="additional">
<h3>Required</h3>
</div>
<a href="#additional"> Click me </a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With