Fade out a new row in CSS

Question

So I have this table, where I know how to highlight the 2nd child. However I want it to fade out, such that it is evident that a new row is added. At the moment, the 2nd row is always highlighted, however would like some guidance in how to to fade out for CSS(not havent used jquery in my code)

I have noticed there is fadeout option in jquery, but can someone tell me how to fadeout in plain css. Below is the line that highlights the 2nd row. i would like to fade out to denote that a new row was added to the table.

tr:nth-child(2){background-color: red;}

score 3 · Answer 1 · answered Feb 01 '19 at 20:56

3

If I understood what you asked, you can do it with animation

tr:nth-child(2){
  background-color: red;
  animation: fadeout 2s forwards;
}

@keyframes fadeout {
    to {
        background-color:#ffffff;
    }
}

answered Feb 01 '19 at 20:56

Dialex

439
2
9

Thanks. This does work, however everytime I reload the page this animation kicks in. I want the animation to kick in ONLY if a new row is added. Not everytime I refresh the page. – user3423407 Feb 01 '19 at 21:46
If you don't tell us how do you get this new row, we can't give you a precise answer. Post the code where we can see how you get the new row. – Dialex Feb 02 '19 at 09:48

Andy Hoffman · Answer 2 · 2019-02-01T23:54:34.823

You should consider CSS :target.

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

Give each of your table rows a unique id. Using :target in our CSS, we can intercept the existence of that id in the address bar and trigger the fade out animation accordingly. The animation will only occur on page refresh if the id in the address bar fragment matches the id on the <tr>.

@keyframes fadeRow {
  from {
    background-color: red;
  }
  to {
    background-color: transparent;
  }
}

/* 
   If the address bar fragment matches the id of the 
   <tr>, trigger the fadeRow animation for only that <tr>.
*/
tr:target {
  animation: 1s fadeRow forwards;
}

/* Generic styles */
table { width: 100%; }
td { padding: .25em .5em; }
a { display: block; margin-bottom: .5em; }

<table>
  <tbody>
    <tr id="row_1">
      <td>one</td>
    </tr>
    <tr id="row_2">
      <td>two</td>
    </tr>
  </tbody>
</table>

<!-- Matches www.mysite.com#row_1 -->
<a href="#row_1">Simulate fadeout row 1</a>

<!-- Matches www.mysite.com#row_2 -->
<a href="#row_2">Simulate fadeout row 2</a>

https://jsfiddle.net/orLbwm58/

score 0 · Answer 3 · answered Feb 01 '19 at 20:56

0

You are searching for transitions. You can see some good examples/suggestions here.

My recommendation is learning to use ease-out.

answered Feb 01 '19 at 20:56

Fade out a new row in CSS

3 Answers3