Animované skrytí animovaně zobrazeného obrázku

Chtěl bych napodobit to, co mají na sciencemag.cz (v článcích, ne na hlavní stránce): když se odroluje stránka téměř až dolů, v dolní části obrazovky zpoza pravého okraje vyjede okénko (s obrázkem a odkazem na jiný článek) a když se stránkou roluje zpět nahoru, okénko zase zajede za pravý okraj.
Mně se podařilo dosáhnout jen poloviny oné funkčnosti: po odrolování o určitou vzdálenost dolů vyjede zprava obrázek, ale když posunuju obsah stránky zpět nahoru, obrázek zmizí bez animace. Technicky to mám takto: v dolním pravém rohu mám přišpendlený DIV (position: fixed; right: 5px; bottom: 5px) a v něm obrázek, který má visibility: hidden. Objevení obrázku je řízeno touto animací:
a ta animace je spuštěna po odrolování stránky o 350 pixelů přidáním třídy vyjet (v níž je (totožné) jméno animace a visibility: visible):
Předpokládám, že logické by bylo animované skrytí zařídit přidáním jiné třídy, která bude obsahovat odkaz na jinou animaci stejnou jako ta předchozí, jen s přehozenými číselnými hodnotami, čili {0% {transform: translateX(0%);} 100% {transform: translateX(110%);}}. Jenže nevím, jak takovou třídu přiřadit, to znamená jak její přiřazení podmínit, aby se projevila jen při rolování zpět nahoru pod hranici 350 px, nikoly od výchozího načtení (kdy scrollTop == 0) po 350px. Nebo jsem to udělal moc složitě a šlo by to jednodušeji? Děkuji za radu.