Hey so I was practicing animation by creating a bouncing ball web app
but then I tried changing the background of the body and it won’t change .
can someone please help me ?
here’s my code , it’s a bit long but u can skip to the body tag …last line
<style>
.ball{
width:100px;
height:100px;
margin:50px auto;
background-image:
radial-gradient(circle, #051937, #004d7a, #008793, #00bf72, #a8eb12);
border-radius: 50%;
position: relative;
animation-name: bouncing;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.18,.94,.71,1)
}
.shadow {
top:455px;
width: 10px;
height: 2px;
border-radius: 50%;
background-color: grey;
margin:450px auto;
animation-name: shadow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.18,.94,.71,1)
}
@keyframes shadow {
50%{
transform: scale(4);
opacity: 0.2;
}
}
@keyframes bouncing {
0% {
top: 0px;
}
50% {
top: 450px;
width: 130px;
height: 50px;
;
}
100% {
top: 0px;
}
}
}
body{
background: #a8eb12;
}
</style>