Animation along a curved path[Explanation Required]

HTML-CSS
1

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

2

Can you provide us with a link to the lesson?

3


This is the blog

4

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.