# Fade out/in CSS feature of first post

**URL:** <https://meta.discourse.org/t/fade-out-in-css-feature-of-first-post/55362>\
**Category:** UX\
**Created:** [Janvier 8, 2017, 12:46 UTC](https://meta.discourse.org/t/fade-out-in-css-feature-of-first-post/55362 "2017-01-08T12:46:06Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![charleswalter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/charleswalter/32/116433_2.png) [@charleswalter](https://meta.discourse.org/u/charleswalter)\
**Post date:** [Janvier 8, 2017, 1:04 UTC](https://meta.discourse.org/t/fade-out-in-css-feature-of-first-post/55362/2 "2017-01-08T13:04:49Z")

</div>

I’m going to try to answer my own topic :). I found these css definitions which seem to go over the relevant fades in Discourse

```css
background-fade-highlight{0%{background-color:#d4ecfc}100%{background-color:transparent}}

.modal-backdrop.fade{opacity:0}.modal-backdrop,.modal-backdrop.fade.in{-webkit-animation:fade .3s;animation:fade .3s;opacity:.9;filter:alpha(opacity=90)}

@keyframes fade{from{opacity:0}to{opacity:0.9}}@-webkit-keyframes fade{from{opacity:0}to{opacity:0.9}}

@keyframes slidein{from{transform:translateY(-20%)}to{transform:translateY(0)}}@-webkit-keyframes slidein{from{-webkit-transform:translateY(-20%)}to{-webkit-transform:translateY(0)}}

 .discourse-tag{-webkit-animation:fadein .7s;animation:fadein .7s}

 .topic-body.highlighted{animation:background-fade-highlight 2.5s ease-out}
 .topic-list>tbody>tr.highlighted{animation:background-fade-highlight 2.5s ease-out}
 .topic-list button.bulk-select{padding:0;background:transparent}

.timeline-container.timeline-fullscreen.show{max-height:700px;transition:max-height 0.4s ease-out}

.read-state.read{opacity:0;transition:opacity ease-out 1s}

.timeline-container.timeline-fullscreen{max-height:0;transition:max-height 0.3s ease-in;

#reply-control{transition:height 0.4s ease;width:100%;z-index:999;height:0;background-color:#e6e6e6;bottom:0;font-size:1em;position:fixed}

#reply-control.edit-title .contents .wmd-controls{transition:top 0.3s ease;top:100px}

.timeline-container.timeline-fullscreen .topic-timeline .timeline-footer-controls ul.dropdown-menu .title{padding-left:0}.timeline-container .topic-timeline{margin-left:3em;width:150px;transition:opacity 0.2s ease-in}

.timeline-container .topic-timeline .timeline-footer-controls{margin-top:1em;line-height:2.5em;transition:opacity 0.2s ease-in}

.timeline-container .topic-timeline .timeline-padding{transition:height 0.15s ease-out;cursor:pointer}

.modal.in{-webkit-animation:fade .25s;animation:fade .25s}.modal-body{overflow-y:auto;max-height:400px;padding:15px}.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}.modal-footer .btn.right{float:right}

.discourse-no-touch .topic-body .actions .fade-out{opacity:0.7;transition:opacity 0.7s ease-in-out}

.discourse-touch .topic-body .actions .fade-out{opacity:1}

.topic-body:hover .actions .fade-out,.topic-body .selected .actions .fade-out{opacity:1}

@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}

.extra-info-wrapper .badge-wrapper,.extra-info-wrapper i,.extra-info-wrapper .topic-link{-webkit-animation:fadein .7s;animation:fadein .7s}

```

---

_[View the full topic](https://meta.discourse.org/t/fade-out-in-css-feature-of-first-post/55362)._