Web

Question

Can u please tell me why my sunrise animation didn't work? Plse help me😕
https://sololearn.com/compiler-playground/WhDqtMCpn4cW/?ref=app

Answer 1

Try this:

.sun{
background-color:#fffd37;
height:150px;
width:150px;
border-radius:700px;
display:flex;
justify-content:center;
align-items:center;
margin:400px 100px;
opacity:0;
animation: sunrise-sunset 16s ease-in-out 6s forwards;
}

@keyframes sunrise-sunset{
0%{
opacity:0;
transform:translateY(75px);
background-color:#fffd37;
}
50%{
opacity:1;
transform:translateY(-400px);
background-color:#EE4747;
}
100%{
opacity:0;
transform:translateY(75px);
background-color:#fffd37;
}
}

Answer 2

Thanku so much