CODEWITHSUNDEEP
htmlcss
Janath
Janath

Reputation: 1248

Move illustration on curved path

I need to move illustration image on a curved path like this.

enter image description here

I tried with transform: translateX but I relaized that will not help because it's showing direct movement. Here is my code.

.sun-half-wrapper {
  position: relative;
}

.sun-half {
  position: absolute;
  width: 10.5%;
  top: 12%;
  left: 13.5%;
  animation: sun 5s linear infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.sun-half img {
  width: 100%;
}
            
@keyframes sun {
  from {
    transform: translateX(10px); 
  }
  to {
    transform: translateX(500px);
  }
}
<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" style="">
  </div>
</div>

Any solution? Here is a jsfiddle How about using transform-origin property?

Upvotes: 2

Views: 449

Answers (1)

Temani Afif
Temani Afif

Reputation: 273690

You can combine two movments: the image move to the right and the container move up down:

.sun-half-wrapper {
  position: relative;
  height:80vh
}

.sun-half {
  position: absolute;
  right:0;
  left:0;
  animation: sun 5s ease-in-out  infinite;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  0% {
    bottom:0; 
  }
  50% {
    bottom:80px;
  }
  100% {
    bottom:0px;
  }
}
@keyframes image {
  0% {
    margin-left:0; 
  }
  100% {
    margin-left:50%;
  }

}
<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" width="80">
  </div>
</div>

Or something like this without position:absolute and by simply changing margin:

.sun-half {
  animation: sun 5s ease-in-out  infinite;
  margin-top:20%;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  0% {
    margin-top:20%; 
  }
  50% {
    margin-top:5%;
  }
  100% {
    margin-top:20%;
  }
}
@keyframes image {
  0% {
    margin-left:0; 
  }
  100% {
    margin-left:50%;
  }

}
<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" width="80">
  </div>
</div>

We can optimize with transform:

.sun-half-wrapper {
  position: relative;
  height:80vh
}

.sun-half {
  position: absolute;
  right:0;
  left:0;
  bottom:0;
  animation: sun 5s ease-in-out  infinite;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  50% {
    transform:translateY(-80px);
  }
}
@keyframes image {
  100% {
    transform:translate(50vw);
  }

}
<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" width="80">
  </div>
</div>

Upvotes: 2

Related Questions