CODEWITHSUNDEEP
htmlcsscss-animations
bhansa
bhansa

Reputation: 7534

How can I make this css animation smooth

In the below example you can see the boxes jumping a little bit, How can I make that transition smooth?

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(-10px) translateX(10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 2

Views: 1862

Answers (5)

VXp
VXp

Reputation: 12108

If you ask me, your starting point at 0% should begin with 0px, but that's just me:

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

1: You have to start your animation from transform: translateY(0px) translateX(0px) for smooth transition and

2: transform value should be same at 0% and 100% of keyframes

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite;
  animation-timing-function: linear;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-10px) translateX(-10px);
  }
  50% {
    transform: translateY(0px) translateX(0px);
  }
  75% {
    transform: translateY(10px) translateX(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

user9019817
user9019817

Reputation:

It looks like the jump between the start and end of the animation is too big and that's causing a jump.

This CSS should improve the smoothness:

@keyframes updn {
      0% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(-5px) translateX(5px);
      }
      50% {
        transform: translateY(-10px) translateX(10px);
      }
      75% {
        transform: translateY(-5px) translateX(5px);
      }
      100% {
        transform: translateY(0px);
      }
    }

This is how it looks:

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-5px) translateX(5px);
  }
  50% {
    transform: translateY(-10px) translateX(10px);
  }
  75% {
    transform: translateY(-5px) translateX(5px);
  }
  100% {
    transform: translateY(0px);
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

frnt
frnt

Reputation: 8795

Increment animation-delay on each .box, select them using nth-child() to add animation-delay individually which was already added, 

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}
.box:nth-child(2){
  animation-delay:1s; /*This executes after 1st .box thus animation-delay for this should be 1s (i.e. overall animation time) */
}
.box:nth-child(3){
  animation-delay:2s; /*This executes after 2nd .box thus animation-delay for this should be 1s + 1s (i.e. overall animation time + delay of 2nd child) */
}
@keyframes updn {
  0% {
    transform: translateY(-10px) translateX(10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px) translateX(0px);
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

Deepu Reghunath
Deepu Reghunath

Reputation: 9713

What about this one

.container {
  text-align: center;
  margin-top: 30px;
}

.box {
  background: rgba(0, 10, 103, 0.5);
  height: 50px;
  width: 50px;
  border: 3px solid rgba(0, 10, 103, 0.9);
  margin: 10px;
  display: inline-block;
  animation: updn 1s infinite ease-out;
}

.box:nth-child(2) {
  animation-delay: 1.2s;
}

.box:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes updn {
  0% {
    transform: translateY(0px) translateX(10px);
  }
  50% {
    transform: translateY(10px);
  }
  
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(1px) translateX(10px);
  }
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

Related Questions