Animation not working?

Question

The animation in the code below works in the webversion of SL, but not on the mobile one. I already tried using different vendor prefixes, but that didn't help. Can anyone help me out please?

https://code.sololearn.com/Wqg11K5Op4tL/?ref=app

Answer 1

Hi Naitomea ,

The problem is the height in loader id, the value is 100% but.. 100% of what?? height:100% is used when the parent element have a fixed height declared or have any value that applies some height, if you want to set the entire screen as height, you should change 100% to 100vh, this value uses the 100% of height of the viewport.

Your css edited:

#loader {
background-color: #ffffff;

width: 100%;
height: 100vh;

animation: colorChange 5.5s linear 0 normal;

}

Hope it helps you!

Answer 2

I see, I thought 100% of the screen would do the job...
Well, me and web 😒
Thanks for your help!

Answer 3

You're welcome!!
Still learning, I also had problems with this kind of things!! :)

Answer 4

Oh, so am I, especially when it comes down to web programming, usually I am all over C++.