CSS
.parent
{
width: 500px;
height: 500px;
position: relative;
background: rgb(200, 200, 255);
}
.child
{
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #fff;
color: #000;
animation: 5s anim infinite;
}
@keyframes anim
{
0%
{
left: 0;
bottom: 0;
transform: rotate(0);
}
25%
{
left: calc(100% - 50px);
bottom: 0;
transform: rotate(-90deg);
}
50%
{
transform: rotate(-180deg);
bottom: calc(100% - 50px);
left: calc(100% - 50px);
}
75%
{
transform: rotate(-270deg);
left: 0;
bottom: calc(100% - 50px);
}
100%
{
transform: rotate(-360deg);
bottom: 0;
left: 0;
}
}
