Css animation not working when used as loading screen
6 replies, posted
I saw that using blur with css ect... don't work when used as a loading screen, a CSS animation
could it also not work? Because I did an animation in css, it's working perfectly on the website but when used as a loading screen it just simply doesn't work.
I would like to know if animations in javascript working and if no how do others make animated
things please.
Thanks for reading me!
Post code lol
You cannot have animated stuff on the loading screen since the game freezes during loading. You can notice it with the default loading screen, too.
Some loading screen have background that changes color every 5 sec for example or have the
background that change, I was talking about something like this.
I was just wondering if animation with css was possible in the loading screen.
I've done key frames animation in loading screens, it's not very hard
I took a piece of code that I saw on a tutorial to test, it does work on the website, obviously it change the
color of a circle but sadly when used as a loading screen it simply stay white.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta charset="utf-8">
</head>
<body>
<span class="dot"></span>
</body>
</html>
CSS:
.dot {
animation-name: example;
animation-duration: 15s;
animation-iteration-count:infinite;
height: 200px;
width: 200px;
background-color: white;
border-radius: 1110%;
display: inline-block;
margin-left: 50%;
margin-top: 10%;
}
/* The animation code */
@keyframes example {
0% {background-color: white;}
10% {background-color: white;}
20% {background-color: #00ffbf;}
30% {background-color: #bfff00;}
40% {background-color: #ff4000;}
50% {background-color: #ff0040;}
60% {background-color: #ff0080;}
70% {background-color: #bf00ff;}
80% {background-color: #8000ff}
90% {background-color: white;}
100% {background-color: white;}
}
