Sniperninja564

Stream Elements - custom chat CSS for smooth chat animations

Nov 27th, 2021
1,605
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Paste in Custom CSS box on the OBS Browser Source properties */
  2. body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
  3.  
  4. /* Animation Setup - Where it says "29s", set this to your "Messages fade after" time minus 1 second. */
  5. /* If you have "Show messages permanently turned on in Stream Elements, remove the comma and everything after except for the semi-colon */
  6. .chat-line {
  7.     animation: fadeInUp .4s ease forwards, fadeOutUp 0.5s ease 29s forwards;
  8. }
  9.  
  10. @keyframes fadeInUp {
  11.     from { top: 72px; opacity: 0; }
  12.     to   { top: 0px;  opacity: 1; }
  13. }
  14.  
  15. @keyframes fadeOutUp {
  16.     from { top: 0px;   opacity: 1; }
  17.     to   { top: -72px; opacity: 0; }
  18. }
RAW Paste Data