CSS Animations in Power BI

Use CSS animations to get the user’s attention on a certain part of your Power BI reports

Do you have sections in your Power BI reports that need more attention? How about improving the user experience and guidance with the help of CSS animations? In our sample report below you find a few examples of CSS animations giving you an impression of possibilities with our HTML & CSS Viewer visual.

Check out the different animations by clicking the radio buttons and be surprised by what happens. The sample report is downloadable using the link below.

 

Download Sample File

How to create CSS animations with the HTML & CSS Viewer visual

Download the sample report and use it as an example for your own report. The CSS code used for the animations can be found in the measures. Simply copy & paste the animation you like into a measure in your report and adjust the code. You will find more CSS animation possibilities by searching the internet for “CSS animation”.
Bring your newly created CSS measure to the HTML & CSS Viewer visual’s “CSS” placeholder. In your HTML measure, link to the created CSS ID/class and add your HTML measure to the visual’s “HTML” placeholder.

Always wanted to know how color opacity/transparency is achieved with CSS in a Power BI report? Learn how to.

 

Previous Article Combine DAX, HTML and static Text
Next Article Different kinds of lists