Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Comment highlight css transition effect

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!

like image 494
follmer Avatar asked Dec 30 '16 05:12

follmer


People also ask

Which CSS property is used for transition effect?

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.

What is transition effect in CSS?

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 you highlight in CSS?

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.


2 Answers

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>
like image 136
Jones Joseph Avatar answered Oct 06 '22 10:10

Jones Joseph


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>
like image 29
Ricky Avatar answered Oct 06 '22 10:10

Ricky