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!

回答1:

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>

回答2:

You can use a CSS animation like so:

:target {   border-radius: 3px;   animation: highlight 500ms ease-out 2 alternate; } @keyframes highlight {   100% {     background-color: red;   } }

<div class="col-lg-12 section-header" id="additional">   <h3>Required</h3> </div>  <a href="#additional"> Click me </a>

文章来源: Comment highlight css transition effect