Animation along a curved path[Explanation Required]

HTML part

<div class="cont">
  <div class="elem"></div>
</div>

CSS part

body{
  margin:0;
  padding:0;
  background-color:#F0F3F4 ;
  overflow:hidden;
}
.cont{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.elem{
  background-color:#2C3E50 ;
  height:50px;
  width:50px;
  border-radius:50%;
  animation:rot 1s infinite ease-in alternate;
  
}
.elem::before{
  content:'';
  border:2px solid #2C3E50 ;
  height:60px;
  width:60px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  animation:rot2 1s infinite ease-out alternate;
}
@keyframes rot2 {
  0%{
    transform:translateY(80px);
  }
}
@keyframes rot {
  0% {
    transform:translateX(100px);
  }
  100% {
    transform:translateX(-100px);
  }
}

Just by changing the animation-timing-functions how can the animating-path be changed

Can you provide us with a link to the lesson?


This is the blog

To answere this question we first need to know what the animation-timing-functions is and does.
It specifies the speed curve of an animation.
A speed curves sets the Time and animation from one CSS style to another. And can be used to make things go smoothly. With other words the animation-timing-function it is used how a transition will proceed over its duration, allowing a transition to change speed during its course.

For some values, the effect may not be as obvious unless the transition duration is set to a larger value.

Each of the predefined keywords has an equivalent cubic B├ęzier curve value or equivalent stepping function value.

Now we know all of this we you can figure out your own question if not then read the next 2 sources i used.

Source: https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp and https://tympanus.net/codrops/css_reference/animation-timing-function/

If you still cannot figure it out I be glad to help.