Fade out/in CSS feature of first post

UX
1

I’ve noticed a fade out CSS effect when I enter a topic on the first post of the first posts background. Is there a way to disable this via CSS?

It’s a cool feature, but on some of our categories with backgrounds, it can make the text hard to read for the first few seconds and appears a bit jarring. Without category backgrounds, it seems to work better. also, when ads are also loading in the pages, it feels like there is too much animating.

Example topics with backgrounds


1 Like
2

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

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}
1 Like
3

Okay, I’ve disabled the animation for now, by using the following CSS (for anyone who might be interested)

.topic-body.highlighted{animation:background-fade-highlight 0s}

19 Likes