Fade animation in PowerBI with an SVG image and CSS

[AndreeaV]

Hi,

I am trying to create a fade animation for an image in PowerBI that lasts 3 seconds and then disappears. I use the HTML Content custom visual.

Is my code OK? In my report, it doesn't work. 

Thanks!

For the CSS:

CSS fade animation =

"

@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.fade-out {
animation: fadeOut 3s forwards;
}

"

For the HTML:

HTML =

"<p>

  <span class='effect'>"&[Flag]&"</span>

</p>"

[Flag] is the SVG code of the image.

[OwenAuger]

Hi @AndreeaV 

I believe you need to change the HTML measure to this, using fade-out as the class name:

HTML = 
"<p>
  <span class='fade-out'>" & [Flag] & "</span>
</p>"

This worked for me in a test report.

Does it work for you?