How to smoothen linear translate animation in css

NischalLamichhane
January 26, 2024
152 views
0 votes
2 Answers

So i wanted to try make a spaceship using pure css and tried to add some details. I added 4 dots in the body of spaceship which i want to give the effect of rotating. Since its a 2d model we will only see the rotation from front just like marquee tag. I added keyframes but it aint smooth. It suddenly cuts the animation when the animation time stops. How can i fix that to make it look like its rotating without any stops. Here is the code:

<div class="spaceship">
  <div class="glass">
    <div class="bottom">
      <div class="point1"></div>
      <div class="point2"></div>
      <div class="point3"></div>
      <div class="point4"></div>
    </div>
  </div>
</div>

and css:

   

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #333;
    }

    .spaceship {
      position: absolute;
      height: 200px;
      aspect-ratio: 1;
    }

    .spaceship .glass {
      height: 100px;
      aspect-ratio: 1;
      /*   background: red; */
      background: rgba(255, 255, 255, 0.19);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.8px);
      -webkit-backdrop-filter: blur(6.8px);
      border-radius: 50%;
    }

    .spaceship .bottom {
      position: absolute;
      height: 30px;
      width: 100px;
      /*   background: red; */
      border-radius: 20px;
      background-image: linear-gradient(
        to right,
        #af2323,
        #b5242e,
        #bb2739,
        #c02a44,
        #c42e4f
      );
      bottom: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      /*   flex-direction:space-between; */
      gap: 10px;
      overflow-x: hidden;
    }
    .point1,
    .point2,
    .point3,
    .point4 {
      height: 20px;
      aspect-ratio: 1;
      background: #fff;
      border-radius: 50%;
      animation: move 4s linear infinite;
    }
    @keyframes move {
      0% {
        translate: 100% 0%;
      }
      100% {
        translate: 0% 0%;
      }
    }

<div class="spaceship">
  <div class="glass">
    <div class="bottom">
      <div class="point1"></div>
      <div class="point2"></div>
      <div class="point3"></div>
      <div class="point4"></div>
    </div>
  </div>

</div>

Tags: css

Answers

Animate the dots to the distance of the width of one dot plus a gap. This will make the animation seem seamless and infinite. We’d need to add a fifth dot too to ensure that there is a right dot near the end of the animation (before it loops).

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #333;
    }

    .spaceship {
      position: absolute;
      height: 200px;
      aspect-ratio: 1;
    }

    .spaceship .glass {
      height: 100px;
      aspect-ratio: 1;
      /*   background: red; */
      background: rgba(255, 255, 255, 0.19);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.8px);
      -webkit-backdrop-filter: blur(6.8px);
      border-radius: 50%;
    }

    .spaceship .bottom {
      position: absolute;
      height: 30px;
      width: 100px;
      /*   background: red; */
      border-radius: 20px;
      background-image: linear-gradient(
        to right,
        #af2323,
        #b5242e,
        #bb2739,
        #c02a44,
        #c42e4f
      );
      bottom: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      /*   flex-direction:space-between; */
      gap: 10px;
      overflow-x: hidden;
    }
    .point1,
    .point2,
    .point3,
    .point4,
    .point5 {
      height: 20px;
      aspect-ratio: 1;
      background: #fff;
      border-radius: 50%;
      animation: move 4s linear infinite;
    }
    @keyframes move {
      0% {
        translate: 0 0;
      }
      100% {
        translate: calc(-100% - 10px) 0%;
      }
    }

<div class="spaceship">
  <div class="glass">
    <div class="bottom">
      <div class="point1"></div>
      <div class="point2"></div>
      <div class="point3"></div>
      <div class="point4"></div>
      <div class="point5"></div>
    </div>
  </div>

</div>

Use gradient to create the dots and then animate the background-position.

You can also simplify your code like below:

body {
  background: #333;
}
.spaceship {
  display: grid;
  height: 100px; /* control the size */
  aspect-ratio: 1;
}
.spaceship:before,
.spaceship:after {
  content:"";
  grid-area: 1/1;
}
.spaceship:before {
  background: rgba(255, 255, 255, 0.19);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.8px);
  border-radius: 50%;
}
.spaceship:after {
  place-self: end center;
  z-index: 1;
  height: 30%;
  aspect-ratio: 3;
  border-radius: 999px;
  background: 
    radial-gradient(#fff 48%,#0000 51%) 0/calc(100%/3),
    linear-gradient(to right, #af2323, #b5242e, #bb2739, #c02a44, #c42e4f);
  animation: m 2s linear infinite;
}
@keyframes m {
  to {
    background-position: -50%;
  }
}

<div class="spaceship"></div>

Please signup or login to give your own answer.

Click here to cancel reply.