Using Animated SVG as page background

smpa01 

Hi, thank you for the reply. I'm not sure i understand what you said (new to pbi, almost 0 in css javascript, not english native). You said it's not possival to have animation effects in backgroud image in pbi? But it's possible with keyframe.

___Note: I have tried to post a message explaining my problem but was marked as span (don't know why, it's my first post).___
I have already made an svg file (image made in adobe illustratos and exported to svg). It's only a background image for home page, then it will have link placed over the icons wiht button action to redirect to visuals pages. I have already made that home page with visual efects (changed svg code, in top with class name, and at bottom with some code). Got this code from animista site.
It works both opening the svg file in browser and in power bi, for the experience i made some zoom. but all the effects i tried, boucing fading etc they work. But they only work whem opening the page, ie on loading.

This is my code (the middle stuff is an icon i'm making experiences in adobe also, didn't copy the whole backgroun image)

<?xml version="1.0" encoding="UTF-8"?><svg
class="kenburns-top"
 id="Camada_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.73 148.62"><defs><style>.cls-1{fill:#e8eaec;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-19,.cls-20,.cls-21,.cls-22,.cls-23,.cls-24,.cls-25,.cls-26,.cls-27,.cls-28,.cls-29,.cls-30,.cls-31,.cls-32,.cls-33,.cls-34,.cls-35,.cls-36,.cls-37,.cls-38,.cls-39,.cls-40,.cls-41,.cls-42,.cls-43,.cls-44,.cls-45,.cls-46,.cls-47,.cls-48,.cls-49,.cls-50,.cls-51,.cls-52,.cls-53,.cls-54,.cls-55,.cls-56,.cls-57,.cls-58,.cls-59,.cls-60,.cls-61,.cls-62,.cls-63,.cls-64,.cls-65,.cls-66,.cls-112{fill:#f6f7f8;}.cls-112,.cls-114,.cls-124{opacity:.03;}.cls-113{fill:#98a2ac;}.cls-113,.cls-130,.cls-163{opacity:.35;}.cls-209{fill:url(#Gradiente_sem_nome_2);}.cls-114{fill:#f5f6f7;}.cls-115{fill:#364a5d;}.cls-116{fill:#596979;}.cls-117{fill:#d9dde0;}.cls-118{fill:#8c97a2;}.cls-119{fill:#384b5f;}.cls-120{fill:#d4d8dc;}.cls-121{fill:#e6e8eb;}.cls-122{fill:#a1aab3;}.cls-123{fill:#72808d;}.cls-124{fill:#f7f8f9;}.cls-125{fill:#a9b1ba;}.cls-126{fill:#667584;}.cls-127{fill:#5f6f7e;}.cls-128{fill:#aeb6be;}.cls-128,.cls-193,.cls-202{opacity:.28;}.cls-129{fill:#5e6e7d;}.cls-129,.cls-148,.cls-186{opacity:.55;}.cls-130{fill:#97a1ab;}.cls-131{fill:#f9fafa;}.cls-132{fill:#b6bdc4;}.cls-132,.cls-187,.cls-203{opacity:.25;}.cls-133{fill:#7a8794;}.cls-134{fill:#768391;}.cls-134,.cls-136,.cls-160{opacity:.47;}.cls-135{fill:#34485b;}.cls-136{fill:#758290;}.cls-137{fill:#f4f5f6;}.cls-137,.cls-172,.cls-185{opacity:.04;}.cls-138{fill:#b7bec5;}.cls-139{fill:#eef0f1;}.cls-140{fill:#8d98a3;}.cls-141{fill:#e4e7e9;}.cls-141,.cls-155{opacity:.09;}.cls-142{fill:#838f9b;}.cls-143{fill:#7f8b98;}.cls-144{fill:#ced3d8;}.cls-145{fill:#6e7c8a;}.cls-146{fill:#677685;}.cls-147{fill:#3c4f62;}.cls-148{fill:#5c6c7c;}.cls-149{fill:#32465a;}.cls-150{fill:#73818e;}.cls-151{fill:#cdd2d7;}.cls-152{fill:#47596b;}.cls-153{fill:#5a6a7a;}.cls-154{fill:#798693;}.cls-155{fill:#e5e8ea;}.cls-156{fill:#8f9aa5;}.cls-157{fill:#9fa8b2;}.cls-158{fill:#bbc2c8;}.cls-159{fill:#e3e6e8;}.cls-160{fill:#74818f;}.cls-161{fill:#506172;}.cls-161,.cls-192,.cls-200{opacity:.59;}.cls-162{fill:#eceef0;}.cls-163{fill:#99a3ad;}.cls-164{fill:#f1f2f4;}.cls-165{fill:#687785;}.cls-166{fill:#aab2bb;}.cls-167{fill:#46586a;}.cls-168{fill:#ebedef;}.cls-169{fill:#b3bac2;}.cls-170{fill:#dcdfe3;}.cls-171{fill:#3a4d60;}.cls-172{fill:#f2f3f5;}.cls-173{fill:#4c5d6f;}.cls-174{fill:#415366;}.cls-175{fill:#919ca6;}.cls-176{fill:#c6ccd1;}.cls-177{fill:#dde0e4;}.cls-178{fill:#4a5c6d;}.cls-179{fill:#88949f;}.cls-180{fill:#485a6c;}.cls-181{fill:#a5aeb6;}.cls-182{fill:#fbfbfc;}.cls-183{fill:#bfc5cb;}.cls-184{fill:#a2abb4;}.cls-185{fill:#f3f4f5;}.cls-186{fill:#5d6d7c;}.cls-187{fill:#b4bbc3;}.cls-188{fill:#bac1c7;}.cls-189{fill:#b8bfc6;}.cls-190{fill:#f0f1f3;}.cls-191{fill:#929da7;}.cls-192{fill:#526374;}.cls-193{fill:#acb4bc;}.cls-194{fill:#7d8a96;}.cls-195{fill:#c4cacf;}.cls-196{fill:#3f5264;}.cls-197{fill:#566677;}.cls-198{fill:#9ba5ae;}.cls-199{fill:#788592;}.cls-200{fill:#516273;}.cls-201{fill:#6b7988;}.cls-202{fill:#adb5bd;}.cls-203{fill:#b5bcc3;}.cls-204{fill:#86929d;}</style>
 <linearGradient id="Gradiente_sem_nome_2" x1="4376.57" y1="1952.74" x2="4499.22" y2="1952.74" gradientTransform="translate(-1884.31 -4376.57) rotate(90) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".28" stop-color="#fafafb"/><stop offset=".6" stop-color="#edeef2"/><stop offset=".93" stop-color="#d7dae2"/><stop offset="1" stop-color="#d1d5de"/></linearGradient></defs><g id="Icons"><g><g id="Icon_Base"><g id="Icon"><g id="Sombra"><circle class="cls-204" cx="70.87" cy="75.48" r="55"/><circle class="cls-16" cx="70.86" cy="75.47" r="54.86"/><circle class="cls-5" cx="70.86" cy="75.45" r="54.75"/><circle class="cls-142" cx="70.87" cy="75.42" r="54.61"/><circle class="cls-91" cx="70.86" cy="75.41" r="54.47"/><circle class="cls-76" cx="70.86" cy="75.39" r="54.34"/><circle class="cls-8" cx="70.86" cy="75.37" r="54.22"/><circle class="cls-143" cx="70.86" cy="75.35" r="54.08"/><circle class="cls-22" cx="70.86" cy="74.26" r="46.49"/><circle class="cls-7" cx="70.87" cy="74.22" r="46.36"/><circle class="cls-6" cx="70.87" cy="74.2" r="46.24"/><circle class="cls-79" cx="70.86" cy="74.2" r="46.1"/><circle class="cls-174" cx="70.86" cy="74.18" r="45.97"/><circle class="cls-49" cx="70.87" cy="74.16" r="45.85"/><circle class="cls-196" cx="70.87" cy="74.13" r="45.71"/><circle class="cls-37" cx="70.86" cy="74.13" r="45.58"/><circle class="cls-43" cx="70.86" cy="74.11" r="45.44"/><circle class="cls-147" cx="70.86" cy="74.08" r="45.32"/><circle class="cls-44" cx="70.85" cy="74.05" r="45.19"/><circle class="cls-171" cx="70.86" cy="74.05" r="45.05"/><circle class="cls-23" cx="70.86" cy="74.03" r="44.91"/><circle class="cls-119" cx="70.85" cy="73.99" r="44.8"/><circle class="cls-101" cx="70.85" cy="73.97" r="44.66"/><circle class="cls-115" cx="70.86" cy="73.97" r="44.53"/><circle class="cls-67" cx="70.86" cy="73.95" r="44.41"/><circle class="cls-135" cx="70.86" cy="73.92" r="44.27"/><circle class="cls-111" cx="70.87" cy="73.91" r="44.14"/><circle class="cls-149" cx="70.86" cy="73.89" r="44"/><circle class="cls-26" cx="70.86" cy="73.87" r="43.88"/></g><circle id="Roda" class="cls-209" cx="68.43" cy="61.32" r="61.31"/></g></g><g class="button" id="Icon_Ajuda"><g><g><path class="cls-208" d="M70.57,54.39v9.18c0,1.18-.96,2.14-2.14,2.14h0c-1.18,0-2.14-.96-2.14-2.14v-9.18c-2.18-.41-4.26-1.46-5.94-3.14-4.46-4.46-4.46-11.7,0-16.16,4.46-4.46,11.7-4.46,16.16,0,4.46,4.46,4.46,11.7,0,16.16-1.68,1.68-3.76,2.73-5.94,3.14h0Z"/><line class="cls-208" x1="66.3" y1="54.39" x2="68.15" y2="54.39"/></g><g><path class="cls-208" d="M65.17,39.86c0-2.03,1.86-3.63,3.97-3.19,1.23,.26,2.23,1.25,2.49,2.49,.32,1.53-.43,2.92-1.64,3.58-.97,.52-1.55,1.56-1.55,2.66v1.32"/><path class="cls-208" d="M68.65,49.11c0,.12-.1,.21-.21,.21s-.21-.1-.21-.21,.1-.21,.21-.21,.21,.1,.21,.21Z"/></g></g><g><path class="cls-208" d="M82.2,42.09h4.23c1.74,0,3.15,1.41,3.15,3.15v25.1c0,1.74-1.41,3.15-3.15,3.15H50.44c-1.74,0-3.15-1.41-3.15-3.15v-25.1c0-1.74,1.41-3.15,3.15-3.15h4.17"/><polyline class="cls-208" points="57.65 73.49 55.72 78.35 68.43 78.35 81.15 78.35 79.22 73.49"/><path class="cls-208" d="M86.22,82.04l3.68,6.64c.55,1-.17,2.22-1.31,2.22H48.28c-1.14,0-1.86-1.23-1.31-2.22l3.68-6.64h35.57Z"/></g></g></g></g>
 
<style>
.kenburns-top {
	animation: kenburns-top 5s ease-out both;
}


@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}

</style></svg>

The i changed the last part to:

<style>
.kenburns-top {
	animation: kenburns-top 5s ease-out both;
	animation-play-state: paused; 
}

.kenburns-top:hover{
  animation-play-state: running;              /* trigger on hover */
}
@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}

</style>

Worked in web browser but not in pbi