Vivaldi Animations

Animation of Vivaldi UI make browser look slow for me, so I just want browser with no UI animations.
Vivaldi had internal setting for disable UI Animation, but some animations still there.\

For example if you click on + new tab, extensions icon there still transform animation.

Add Custom CSS

For disable Vivaldi UI animations, we need custom CSS to override default Vivaldi CSS. Here step-by-step for enabling custom.css

1. Open vivaldi://experiments
2. Check [x] Allow for using CSS modifications.
3. Open vivaldi://settings/appearance/
4. New setting will be appeared Custom UI Modifications
5. Choose the folder you want to use, for example:
   • $HOME/.config/vivaldi/CustomCSS
   • Documents/Vivaldi/CustomCSS
6. Place CSS files inside it, for example:
   • $HOME/.config/vivaldi/CustomCSS/custom.css
   • Documents/Vivaldi/CustomCSS/custom.css

Disable UI Animations

After you enabling, Allow for using CSS modifications next step is add CSS to override default Vivaldi CSS. Just copy this line to custom.css and save, after that restart your Vivaldi browser.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 
  Disable UI Animations 
*/

*:not(.favicon):not(.jstest-favicon-image):not(.tab-audio):not(.audioicon):not(.tab-position):not(#modal-bg):not(input[type=checkbox]) {
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  animation: none !important;
  transform: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  transition: none !important;
}

If working, it looks like this.